javascript - 添加文本后可调整大小的 div 不调整大小

Question

我在 div 元素上使用了 jQuery UI 可调整大小的功能。将文本添加到 div 后，调整大小功能不起作用。

  <div id="resizable" class="ui-widget-content">
    Resizable div
   </div>

我有按钮可以将文本添加到 div。

  <input type="button" name="add" value="Add text" id="add"> // onclick add text function

将文本添加到 div 后，它不再可调整大小。这是 jsfiddle 链接： jsfiddle

如何处理这个事件。编辑：我的要求是添加全新的文本。我不想将新文本附加到以前的文本中。

Answer 1

使用append代替html

var txt="This is dummy text";
$("#add").click(function(){
    $("#resizable").append(txt);
});

Answer 2

对文本使用单独的跨度，因为调整大小是基于可调整大小的div内的以下div

    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>

如果您使用html()它将替换这些divs. 所以请尝试以下

<div id="resizable" class="ui-widget-content">
    <span id="resizable-text">Resizable div</span>
   </div>

在js中

  var txt="This is dummy text";
        $("#add").click(function(){
        $("#resizable-text").html(txt);
        });

如果您使用附加，则文本将附加现有文本。