jQuery-clone div 不响应点击事件

Question

目标是在不破坏布局的情况下，展开一个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

Answer 1

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

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

Answer 2

使用 事件委托 在 DoM 元素中动态创建 class

$(".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;
  }
});

Answer 3

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

这就是为什么您需要使用 class '.box-active' 在所有 div 上附加一个事件。

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

如果您将它应用到文档上，这也会起作用，但最好尽可能保持简约，因此将它添加到框父块中。

使用 on 函数会将其应用于添加到 DOM 且位于 #parent-of-boxes

中的所有元素

Answer 4

如果您想继续使用 "clone"，您需要在调用中包含 "withDataAndEvents" 布尔参数。默认为 false。

所以当你把它写成

copy = $(this).clone();

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

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

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

jQuery-clone div 不响应点击事件

jQuery-cloned div not responding to click event

javascript

jquery

html

css

clone