Question

我在div元素上使用了jQuery UI resizable函数。将文本添加到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

中的以下 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);
        });

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

可调整大小的div在添加文本后不会调整大小

2 个答案: