javascript - jQuery 单击事件不会在 'loaded' html 上触发

Question

我试图理解为什么将 HTML 加载到 div block 中会使其类语句在点击事件中实际上不存在。

我的 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 block 中的 HTML 被加载到上方的 div block 中，然后 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 block 但不在加载的上层，当两者具有相同的类定义时？

Answer 1

其他答案已经涵盖了您问题的核心原因(复制元素的 HTML 并将其放置在其他地方将创建一个全新的 DOM 元素，并且不会复制任何绑定(bind)到原始元素的事件......保持请记住，当您添加事件监听器时，它只会绑定(bind)到您这样做时存在的任何元素)

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

jQuery 有一些不同的技术可以使这类事情变得简单:

.clone()基本上会做与您现在正在做的相同的事情*，它将复制 HTML 内容并创建一个新的 DOM 元素。但是，如果您传递 true(即:.clone(true))，它将完整地克隆所有数据和事件。

* 请注意，要真正获得与使用 .html() 相同的结果，您需要执行 .children().clone()，否则你将同时获得内部和外部 div.. 这可能需要也可能不需要，具体取决于用例

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

此外，如果您处于同样的情况但不想进行克隆，而只是想将元素从一个地方移动到另一个地方，还有另一种方法叫做 .detach()这将从 DOM 中删除该元素，但保留所有数据和事件，允许您稍后以相同状态重新插入它。

例如:https://jsfiddle.net/Lx0973gc/2/ (不是最好的例子，因为你不会看到它移动到任何地方，但它正在移动!)

作为另一种选择，您可以使用委托(delegate)事件绑定(bind)，它实际上将事件绑定(bind)到您知道不会更改的不同元素(父元素)，但仍然允许您将其定位到子元素:

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

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