添加文本后可调整大小的 div 未调整大小答案

【问题标题】：Resizable div not resizing after adding text添加文本后可调整大小的 div 未调整大小
【发布时间】：2013-10-15 09:27:18
【问题描述】：

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

  <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

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

为 text 使用单独的 span，因为调整大小是基于 resizable div

内的以下 divs

    <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);
        });

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

【讨论】：

【解决方案2】：

使用append 代替html

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

【讨论】：