在InnerHTML中附加HTML后再重新调整Div

I have a simple div that I made resizable through using Jquery UI.

我有一个简单的div,我通过使用Jquery UI使其可调整大小。

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

Jquery Code:

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

After doing so, it works fine. See image below:

这样做之后,它工作正常。见下图:

The div can be resize. The code structure of the div turns into the code below after making it resizable using Jquery.

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>

I want to put a text inside the resizable div, so I decided to put text inside it by appending an HTML to it's innerHTML. See code below:

我想在可调整大小的div中放入一个文本,所以我决定通过在它的innerHTML中添加一个HTML来将文本放入其中。见下面的代码:

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

After successfully appending, the div's resize functionality is lost? Why? What shall I do to make it working?

成功追加后,div的调整大小功能会丢失吗?为什么?我该怎么做才能让它发挥作用?

3 个解决方案

#1

Functionality is lost because you are replacing the current dom elements with new ones that have the same html code. Your code is essentially doing this.

由于您要使用具有相同html代码的新元素替换当前dom元素,因此功能丢失。您的代码基本上是这样做的。

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

By doing this, the browser is wiping out all of the dom elements that used to exist in parent and parses the new html and creates all new dom elements. These new elements don't have the listeners for resizing on them that the old ones did.

通过执行此操作,浏览器将消除以前存在于父级中的所有dom元素,并解析新的html并创建所有新的dom元素。这些新元素没有用于调整旧元素的侦听器。

A good workaround for this is to just use a child div element and change the inner html of that. For the more advanced route you can modify the div through dom manipulation. You can also call resizeable after you set the innerHTML.

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

Don't call resizable multiple times though because you'll start creating many instances of objects that have event listeners bound to many dom elements. You'll create a memory leak.

不要多次调用resizable,因为你将开始创建许多对象的实例,这些对象的事件监听器绑定到许多dom元素。你会创建一个内存泄漏。

#2

Why the resizable functionality is lost is because of this line:

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

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

This re-writes the HTML within the parent node, and destroying all existing elements, and all event handlers bound to those elements.

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

You could instead use

你可以改用

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

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

You could also simply re-bind the resizable plugin after updating the HTML:

您还可以在更新HTML后重新绑定可调整大小的插件:

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

#3

use innerHTML will overide all sub nodes. you can put the text in a child node or use appendChild or insertBefore.

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

HTML code:

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

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

#1