Question

我试图理解为什么将html加载到div块中会使其类声明实际上不存在于click事件中。

我的HTML代码如下所示：

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

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

<button>load it!</button>

我的javascript代码如下所示：

    $('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

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

然后复制不传输任何侦听器的原始html。 DOM具有连接侦听器的节点，但是当您复制纯HTML时，基本上会根据html创建新节点。

Answer 2

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

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

jQuery有一些不同的技术可以让这种事情变得简单：

.clone()基本上会像你现在做的那样做*，它会复制HTML内容并创建一个新的DOM元素。但是，如果您传递TESTFILES := $(wildcard *Test.cpp) CLASSES := $(patsubst %Test.cpp, %, $(TESTFILES))（即：sample <- data.frame(x1=c(1,2),y1=c(2,1), x2=c(2,4),y2=c(3,4),x3=c(5,2),y3=c(1,6)) sample_new <- data.frame(x1=c(1,2),y1=c(2,1), x2=c(2,4),y2=c(3,4),x3=c(5,2),y3=c(1,6),sumx1y1=(sample$x1 + sample$y1), sumx2y2=(sample$x2 + sample$y2),sumx3y3=(sample$x3 + sample$y3))），它将克隆它并保留所有数据和事件。

*请注意，要真正获得与使用true相同的结果，您需要执行.clone(true)，否则您将获得内部和外部.html() ..根据用例

可能需要也可能不需要

ex：https://jsfiddle.net/Lx0973gc/1/

此外，如果您处于相同的情况但没有想要克隆，并且只是想将元素从一个地方移动到另一个地方，那么还有另一种方法{{3}这将从DOM中删除该元素，但保留所有数据和事件，允许您稍后在相同的状态下重新插入它。

ex：.detach()（不是最好的例子，因为你不会看到它移动到任何地方，但是它正在做它！）

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

.children().clone()

ex：https://jsfiddle.net/Lx0973gc/2/

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>

jQuery click事件不会在'loaded'html上触发

5 个答案: