jQuery克隆的div没有响应点击事件答案

【问题标题】：jQuery-cloned div not responding to click eventjQuery克隆的div没有响应点击事件
【发布时间】：2015-10-20 11:47:30
【问题描述】：

目标是在不破坏布局的情况下扩展 div 以覆盖整个屏幕。

我目前的解决方案基本上是这样的：

$( ".box" ).click(function() {
    copy = $(this).clone();
    copy.addClass("box-active");
    // save .box position + size     
    // maximize div
}

$( ".box-active" ).click(function() {
    // minimize div to saved .box position + size
    $(this).remove();
}

但是克隆的 div 不会响应点击事件。有没有办法解决这个问题？

完整代码：http://codepen.io/deuxtan/pen/oXQpRy

【问题讨论】：

标签： javascript jquery html css clone

【解决方案1】：

对 DoM 元素中动态创建的类使用 事件委托

$(".container").on('click', '.box-active', function() {
  if(isFullscreen){ 
    d.width = "100px";
    d.height = "100px";            
    d.top = 0;            
    d.left = 0; 

    $(this).animate(d, duration);
    isFullscreen = false;
  }
});

【讨论】：

@Deuxtan - 很高兴它有帮助 ;-)

【解决方案2】：

动态添加的元素需要使用.on。

$( ".container").on("click", ".box-active", function() {
    // ... minimize div ...
    $(this).remove();
});

【讨论】：

【解决方案3】：

如果您想继续使用“克隆”，则需要在调用中包含“withDataAndEvents”布尔参数。默认为假。

所以当你把它写成

copy = $(this).clone();

您允许传递默认值false，并且关闭中不包含任何数据或事件。您需要显式传递true。

copy = $(this).clone(true);

For reference, here is the documentation for the clone method.

【讨论】：

【解决方案4】：

在您的代码中，您确实在一个元素上应用了 coick 事件，当克隆它时，您并没有克隆它的事件。

这就是为什么您需要在所有具有“.box-active”类的 div 上附加一个事件。

$('#parent-of-boxes').on('click', '.box-active', function() {
 ...
});

如果您将它应用到文档上也可以使用，但最好尽可能保持简约，因此将其添加到 box 父块中。

使用 on 函数会将其应用于添加到 DOM 中的所有元素，这些元素位于 #parent-of-boxes 内

【讨论】：