6

想象一下我有以下代码：

...
<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() { ... });

那也会被删除，还是我需要关闭（）它？

4

4 回答 4

3

我最终会遇到问题，因为我没有使用 .remove() 从 dom 中删除#div2，还是以这种方式清除 html 对我有用？

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

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

于 2013-04-16T18:44:24.703 回答
2

您应该使用$('#div1').empty();而不是使用$('#div1').html('') 您可以使用 //this 克隆元素， $('#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.
于 2013-04-16T18:44:59.127 回答
2

由于您的事件将丢失，您可以.on()像这样使用，因此您不需要重新绑定事件

$(document).on('click','#div2',function() { ... });
于 2013-04-16T18:47:35.937 回答
2

html()如上所述使用应该没问题。不过在 IE9< 中要小心。来自 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() {...});

于 2013-04-16T18:47:55.883 回答