Question

目标是扩展div以覆盖整个屏幕而不会破坏布局。

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

controlPoint2

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

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

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

Answer 2

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

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

Answer 3

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

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

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

如果你在docuemnt上应用它也会有效，但最好尽可能简化它，所以把它添加到父块的框中。

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

Answer 4

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

所以当你把它写成

时

$.ajax({

url : URL,
type : 'POST',
headers : {
            "ACCEPT" : "application/json"
      },
contentType : "application/json; charset=utf-8",
crossDomain : true,
data : request,
dataType : 'json',

success : function(response){

          //my code
   },                                   
  error : function(xhr, status, error) {
          //my code
   }
 });

您允许传递默认值copy = $(this).clone();，并且关闭中不包含任何数据或事件。您需要明确传递false。

true

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

jQuery-cloned div没有响应click事件

4 个答案: