jQuery单击事件不会在“已加载”的HTML上触发

Question

我试图理解为什么将HTML加载到div块中会导致单击事件实际上不存在其class语句。

我的HTML代码如下所示：

<div id="load-to"></div> 

<div id="load-from">
    <div class="load-from-css"> Hello!</div> 
</div>

<button>load it!</button>

我的JS代码如下所示：

$('button').click(function(){
    var html = $('#load-from').html();
    $('#load-to').html(html);
});

$('.load-from-css').click(function(){
    alert('clicked');
});

当我单击按钮时，将来自较低div块的HTML加载到较高div块中，然后HTML如下所示：

<div id="load-to">
    <div class="load-from-css"> Hello!</div>
</div> 

<div id="load-from">
    <div class="load-from-css"> Hello!</div>
</div>

我的问题是，为什么第二个单击事件（在我的jQuery代码中定义）仅在原始的下部“ Hello！”上起作用？ div块但不在加载的上层块上时，当两者具有相同的类定义时？

Answer 1

其他答案已经涵盖了您问题的核心原因（复制元素的HTML并将其放置在其他位置将创建一个全新的DOM元素，并且不会复制绑定到原始元素的任何事件……请记住，当您添加事件监听器时，它只会绑定到您当时存在的任何元素）

但是，我想添加其他一些选项来完成您想做的事情。

jQuery有几种不同的技术可以简化这种事情：

.clone（）本质上将与您现在执行的操作*相同，它将复制HTML内容并创建一个新的DOM元素。 但是，如果您传递true （即.clone(true) ），它将在所有数据和事件完好无损的情况下对其进行克隆。

*请注意，要真正获得与使用.html()相同的结果，您需要执行.children().clone() ，否则您将同时获得内部和外部div ..这可能是必需的，也可能不是必需的。在用例上

例如： https ： //jsfiddle.net/Lx0973gc/1/

此外，如果你在这个同样的情况，但不希望做一个克隆，而只是想一个元素从一个地方移动到另一个，还有另一种方法叫做.detach（） ，这将从DOM删除元素，但保留所有数据和事件，以便您稍后以相同状态重新插入。

例如： https ： //jsfiddle.net/Lx0973gc/2/ （不是最佳示例，因为您不会看到它移动到任何地方，但是它正在这样做！）

作为另一种选择，您可以使用委托事件绑定，它实际上将事件绑定到您知道不会改变的其他元素（父元素），但仍然允许您将其中的子元素作为目标：

$('body').on({
    'click': function() {
    alert('clicked');
  }
}, '.load-from-css');

例如： https ： //jsfiddle.net/Lx0973gc/4/

Answer 2

$('.load-from-css')查找当前存在的所有元素， .click(...)将侦听器附加到所有这些元素。 执行一次。

然后，您复制不传输任何侦听器的原始html。 DOM具有侦听器附加到的节点，但是当您复制纯HTML时，实际上是基于html创建新节点。

Answer 3

因为您只复制HTML。 当只有一个带有“ load-from-css”类的div实例时，将在开始时加载js文件。 复制html后，您应该再次执行添加侦听器的代码。 就像是：

 $('button').click(function(){
    var html = $('#load-from').html();
    $('#load-to').html(html);

    $('.load-from-css').click(function(){
        alert('clicked');
    });

 });

Answer 4

#load-to内部HTML最初为空。 因此，仅为#load-from .load-from-css添加了点击监听器。 动态绑定元素将不会附加点击监听器。

jQuery新版本还具有为动态元素附加事件的功能。 尝试这个

$('button').click(function(){
        var html = $('#load-from').html();
        $('#load-to').html(html);
    });

    $(document).on('click', '.load-from-css', function(){
        alert('clicked');
    });

我们也可以这样使用

$( document ).delegate( "load-from-css", "click", function() {
  alert( "Clicked!" ); // jQuery 1.4.3+
});

Answer 5

仅仅是因为页面没有刷新。 您将一个内容加载到另一个内容而不加载页面，浏览器将无法识别添加到已加载元素中的任何事件。

您应该做的是将javascript标记与内容一起加载。

您的代码应如下所示：

   <div id="load-to">
    <div class="load-from-css"> Hello!</div>
</div> 

<div id="load-from">
    <div class="load-from-css"> Hello!</div>
   <script>$('button').click(function(){
        var html = $('#load-from').html();
        $('#load-to').html(html);
    });

    $('.load-from-css').click(function(){
        alert('clicked');
    });</script>
</div>