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

问题是因为虽然您使用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 3

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

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

Answer 4

它只选择原件，因为您从不选择新元素。选择器只有原始版本，它不是实时收藏。所以你需要重新选择它们。

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

您可以使用事件委派，因此您不会选中所有复选框。在表单上收听更改事件。

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

Answer 5

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

正如@trincot在他的回答中提到的，你需要在文档级别举办一个活动。

例如。我们说我的DOM包含三个输入复选框

clone

现在使用像这样的jQuery选择器绑定事件时，

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

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

JQuery：使用clone（）创建的元素不使用原始的事件属性

5 个答案: