Javascript jQuery克隆的div未响应单击事件

目标是在不破坏布局的情况下扩展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不会响应单击事件。有办法解决这个问题吗

---

完整代码：

对于动态添加的元素，您需要使用

.on

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

---

对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;
  }
});

---

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

这就是为什么需要在类为“.box active”的所有div上附加事件的原因

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

如果您在docuemnt上应用它，这也会起作用，但最好尽可能使其最小化，因此将其添加到父块中

---

使用

on

函数将其应用于添加到DOM中的所有元素，这些元素位于

#框的父对象
如果要继续使用“clone”，则需要在调用中包含“withDataAndEvents”布尔参数。默认情况下，它是false

所以当你把它写成

copy = $(this).clone();

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

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

@Deuxtan-很高兴它有帮助；-）