JQuery的：与克隆制成的元件（）不采取原

Question

HTML的事件属性：

<h2>CHECK AS MANY AS YOU CAN</h2> 
<form id="boxone"> 
</form> 

JS：

$boxone = $("#boxone"); 
$boxone.html('<input type="checkbox" class="fourthboxes">'); 
$fourthboxes = $(".fourthboxes"); 

for(var i=0; i <341; i++) { 

    $fourthboxes.clone(true, true).appendTo($boxone); 
} 

$fourthboxes.change(function() { 
    alert('yo'); 
}); 

复选框的其余不，当我提醒点击它们，只有原来的那个 我甚至尝试过$ fourthboxes.on（'点击'...而不是任何东西 我看了一下这个问题并尝试了解决方案，但它没有工作。

jQuery clone() not cloning event bindings, even with on()

Answer 1

使用.on()：

$(document).on('change', '.fourthboxes', function() { 
    alert('yo'); 
}); 

这使得事件处理工作，为当前的元素，也是未来添加的元素，在.fourthboxes选择匹配。这使用委托事件的原则。

从文档：

当提供一个选择器，该事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用该处理程序，而只会为与选择器匹配的后代（内部元素）调用该处理程序。 jQuery将事件从事件目标引发到处理程序所附的元素（即，最内层到最外层的元素），并沿着匹配选择器的路径上的任何元素运行处理程序。

委托事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。

Answer 2

它只选择原件，因为你从不选择新的元素。选择器只有原件，它不是一个现场收藏。所以你需要重新选择它们。

$(".fourthboxes").on("change", ...) 

您可以使用事件委派，因此您不选择所有复选框。聆听表单上的更改事件。

$("#boxone").on("change", ".fourthboxes", function(){}); 

Answer 3

的问题是因为虽然你用clone(true, true)你克隆你的change事件处理程序添加到他们之前的元素。你只需要围绕交换逻辑：

$boxone = $("#boxone"); 
$boxone.html('<input type="checkbox" class="fourthboxes">'); 
$fourthboxes = $(".fourthboxes"); 

$fourthboxes.change(function() { 
    alert('yo'); 
}); 

for(var i=0; i <341; i++) { 
    $fourthboxes.clone(true, true).appendTo($boxone); 
} 

然而，这将是多更好地使用单个委派的事件处理程序，如下所示：

var $boxone = $("#boxone").on('change', '.fourthboxes', function() { 
    alert('yo'); 
}); 
var $fourthboxes = $('<input type="checkbox" class="fourthboxes">').appendTo('#boxone'); 

for (var i = 0; i < 341; i++) { 
    $fourthboxes.clone().appendTo($boxone); 
} 

Working example

Answer 4

既然你在添加340个其他复选框之前，将$(".fourthboxes")分配给变量$fourthboxes，当添加更改函数时，该变量仍然只保留一个复选框。

将更改函数放在for循环前面，一切按预期工作。

Answer 5

当你clone一个对象，只有对象被克隆。而不是他们的事件。因为在创建克隆之前，事件绑定到原始对象（基于使用的jQuery选择器）。

作为@trincot在他的回答中提到，您需要在文档级别有一个事件。

例如，比方说，我的DOM包含三个输入复选框

<input type="checkbox" class="fourthboxes"> 
<input type="checkbox" class="fourthboxes"> 
<input type="checkbox" class="fourthboxes"> 

现在，当您绑定使用jQuery选择像这样的活动，

$(".fourthboxes").change(function() { 
    alert('yo'); 
}); 

需要注意的事项，就是这个jQuery选择返回DOM元素的数组，出现在页面上，在那个瞬间。然后onchange事件被注册在它们中的每一个上。它相当于将事件绑定到每个现有的DOM（在这种情况下，三个复选框）