JQuery:使用clone(）生成的元素不采用原始的事件属性

JQuery: Elements made with clone() not taking event properties of original

本文关键字：元素 原始 属性 事件 使用 clone JQuery      更新时间：2023-09-26

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

当我点击其他复选框时，它们不会发出警报，只有原始复选框发出警报我甚至试过四元一盒的……但还是一无所获。我看了一眼这个问题，并尝试了解决方案，但没有奏效。

jQuery clone（）不克隆事件绑定，即使使用on（）也是如此

使用.on():

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

这使得您的事件处理程序既适用于当前元素，也适用于未来添加的与.fourthboxes选择器匹配的元素。这使用委派事件的原则。

来自文件：

当提供选择器时，事件处理程序被称为委派。当事件直接发生在绑定元素上时，不调用处理程序，而仅针对与选择器匹配的子体（内部元素）调用处理程序。jQuery将事件从事件目标标记到附加处理程序的元素（即从最里面到最外面的元素），并为与选择器匹配的路径上的任何元素运行处理程序。

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

问题是因为尽管您使用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);
}

工作示例

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

将change函数放在for循环前面，一切都会按预期进行。

它只选择原始元素，因为您从不选择新元素。选择器只有原始集合，而不是活动集合。所以你需要重新选择它们。

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

您可以使用事件委派，这样就不会选中所有复选框。听表格上的变化事件。

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

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。（在这种情况下，有三个复选框）

相关文章：