在其内部 HTML 中附加 HTML 后再次使 Div 可调整大小

Question

我有一个简单的 div，我通过使用 Jquery UI.

使其可以调整大小

<div id="myid_templates_editor_text_1"></div>

Jquery代码：

$('#myid_templates_editor_text_1').resizable({
        animate: true,              
});

这样做之后，它工作正常。见下图：

div可以调整大小。 div 的代码结构在使用 Jquery.

调整大小后变成下面的代码

<div id="myid_templates_editor_text_1" class="ui-resizable ui-draggable" style="width: 109px; height: 114px; position: absolute; left: 621px; top: 527px;">

    <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>

</div>

我想在可调整大小的 div 中放置一个文本，因此我决定通过在其内部 HTML 附加一个 HTML 来将文本放入其中。请参阅下面的代码：

 var parent = document.getElementById('myid_templates_editor_text_1');      
 parent.innerHTML +=  '<p>Sample Text</p>';

成功附加后，div 的调整大小功能丢失了吗？为什么？我该怎么做才能让它发挥作用？

Answer 1

为什么失去可调整大小的功能是因为这一行：

parent.innerHTML +=  '<p>Sample Text</p>';

这会在 parent 节点中重写 HTML，并销毁所有现有元素以及绑定到这些元素的所有事件处理程序。

您可以改用

var newParagraph = document.createElement('p');

newParagraph.textContent = 'hello';
parent.appendChild(newParagraph);

您也可以在更新 HTML:

后简单地重新绑定可调整大小的插件

parent.innerHTML +=  '<p>Sample Text</p>';
$('#myid_templates_editor_text_1').resizable({
    animate: true,              
});

Answer 2

功能丢失，因为您正在用具有相同 html 代码的新元素替换当前 dom 元素。您的代码基本上就是这样做的。

parent.innerHTML = parent.innerHTML + '<p>Sample Text</p>';

通过这样做，浏览器将清除 parent 中曾经存在的所有 dom 元素并解析新的 html 并创建所有新的 dom 元素。这些新元素没有旧元素那样的用于调整它们大小的侦听器。

一个好的解决方法是只使用子 div 元素并更改其内部 html。对于更高级的路线，您可以通过 dom 操作修改 div。您也可以在设置 innerHTML 后调用 resizeable。

不要多次调用 resizable，因为您将开始创建许多对象实例，这些对象的事件侦听器绑定到许多 dom 元素。您将造成内存泄漏。

Answer 3

use innerHTML 将覆盖所有子节点。您可以将文本放在子节点中或使用 appendChild 或 insertBefore。

HTML代码：

<div id="myid_templates_editor_text_1" class="ui-resizable ui-draggable" style="width: 109px; height: 114px; position: absolute; left: 621px; top: 527px;">
    <div id="text"></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>
</div>

JS代码：

//#text is a child node
$('#text').text('some text');
//or use append
$('#myid_templates_editor_text_1').append('some text');

在其内部 HTML 中附加 HTML 后再次使 Div 可调整大小

Make A Div Resizeable Again After Appending HTML in its InnerHTML

javascript

jquery

resize

jquery-ui

autoresize