Question

我想我是否用jQuery html（）方法覆盖div的html全部＆＃39; old＆＃39;从内存中删除DOM元素和所有侦听器？

例如：

HTML：

<div id='aDiv'>
    <div id='anANotherDiv'>An Another Div</div>
</div>

使用Javascript：

$('anANotherDiv').click(function(){
    var b='An Another Div'
    console.log(b);
});


$('#aDiv').html('<div id='oDiv'>This div override the another</div>');
$('#oDiv').click(function(){
    var a='This div override the another';
    console.log(a);
});

所以当我覆盖旧的GC时，会删除旧的DOM元素和监听器吗？

Answer 1

您可以使用jQuery中的on方法，您可以使用它来引用父元素来绑定事件，因此即使您更改了实际的目标DIV的内容，事件也会附加，因为我们有绑定事件并引用父元素。

//Example:
<div id='aDiv'>
    <div id='anANotherDiv'>An Another Div</div>
</div>


$(function(){
   $("#aDiv").on("click", "div", function(){
      var a='This div override the another';
      console.log(a);
   });
});

Answer 2

要解决事件监听器问题，我通常会使用＆＃34;全局点击＆＃34;方法（JSFiddle）：

<强> HTML

<div id="div1" data-clickable>
    Parent Click
    <div id="div2" data-clickable>
        Child ClickClicks
    </div>
</div>

<强> JS

$(document.body).click(function(e){
    var n="[data-clickable]", $t = $(e.target).is(n) ? $(e.target) : $(e.target).parents(n+":first");

    switch ($t.attr('id')){ 
        case 'div1':
            console.debug("DIV1 clicked");
            break;
        case 'div2':
            console.debug("DIV2 clicked");
            break;
    }

});

它会收听正文的点击次数，然后决定这是否是我们正在等待的点击次数。至于元素替换问题，你无能为力。您必须提出一些其他方法，而不是.html()

Answer 3

好的!!让我们从这个方向开始。

这是您的HTML

<div id='aDiv'>
      <div id='anANotherDiv'>An Another Div</div>
</div>

现在aDiv只包含一个div，因为它的孩子是anANotherDiv。现在，当你在控制台上进行此操作时

 $("#adIV").html();

控制台输出将是

<div id='anANotherDiv'>An Another Div</div>

现在你在控制台上找到类似的东西

$('#aDiv').html('<div id=\"oDiv\">This div override the another</div>');

控制台输出仅为

<div id="oDiv">This div override the another</div>

您实际上manipulating完全是整个aDiv结构。 .html()基本上是changes HTML结构。因此，您需要确定是否要完全更改特定HTML或element的{{1}}结构，或者只需node或append < / p> 希望我对你很清楚。

干杯!!

如果我用jQuery更改div的HTML，从内存中删除所有DOM元素和侦听器？

3 个答案: