Question

想象一下，我有以下代码：

...
<div id="div1">
    <div id="div2">Original div2</div>
</div>

<div id="div3"></div>

...

如果我跑

$('#div1').html('');
$('#div3').html('<div id="div2">New div2</div>');

我最终会遇到问题，因为我没有使用.remove（）从dom中删除#div2，或者以这种方式清除html为我做这个吗？

如果div2包含一些附加了处理程序的javascript，比如

，该怎么办？

$('#div2').on('click',function() { ... });

是否也会删除，或者我需要关闭（）它？

Answer 1

我最终会遇到问题，因为我没有使用.remove（）从dom中删除#div2，或者以这种方式清除html为我做这个吗？

不，jQuery会在内部使用.remove（技术上它使用cleanData，但它会执行相同的清理。）

事件将会丢失，因此您必须重新绑定它们。

Answer 2

您应该使用$('#div1').empty();而不是$('#div1').html('') 您可以使用克隆元素 $('#div3').html($('#div2').clone(true)); //这将继承附加到它的任何数据事件。

如果要将元素移动到另一个容器或其他位置，则可以使用append, prepend, before , after。您的所有数据和事件仍然完整无缺

见： -

<div id="container1">Container
    <div id="div2">div2</div>
</div>
<div id="container2">cotainer2</div>

$('#div2').click(function () {
    alert('test')
});
$('#container2').append($('#div2'));//Clicking on div2 will still alert.

Answer 3

由于您的活动将丢失，您可以像这样使用.on()，因此您无需重新绑定活动

$(document).on('click','#div2',function() { ... });

Answer 4

如上所述，您应该可以使用html()。在IE9中要小心＆lt;虽然。来自jquery文档：

注意：在Internet Explorer（包括版本9）中，设置HTML元素的文本内容可能会损坏其子项的文本节点，这些节点因操作而从文档中删除。如果要保持对这些DOM元素的引用并且需要它们保持不变，请使用.empty（）。html（string）而不是.html（string），以便在将新字符串分配给文档之前从文档中删除元素。元件。

如果要保留侦听器，则应使用委派事件侦听。请参阅on()的文档：

<div id="wrapper">
    <div id="div1">
        <div id="div2">Original div2</div>
    </div>

    <div id="div3"></div>
</div>

$('#wrapper').on('click', '#div2', function() {...});

如果我覆盖html，它是否从dom中删除？

4 个答案: