Question

我最初有3个具有相同名称的复选框，并且动态创建了一个复选框。如果我点击3个初始复选框中的任何一个，它会触发事件，但对新创建的复选框不起作用。

<input type="checkbox" name="NewMerheckbox" id="1"/>
<input type="checkbox" name="NewMerheckbox" id="2"/>
<input type="checkbox" name="NewMerheckbox" id="3"/>
<div id="newcheckbox">

</div>

和

$('input[type="checkbox"][name="NewMerheckbox"]').on('click', function() {
alert($(this).attr('id'));
});
$('#newcheckbox').html('<input type="checkbox"name="NewMerheckbox" id="4"/>');

Answer 1

您正在尝试向尚未存在的对象添加点击处理程序。 jQuery允许您将单击处理程序添加到父元素，以便它们仅在某些子项上触发，但在设置单击处理程序时不必存在这些子项。

$('body').on('click', 'input[type="checkbox"][name="NewMerheckbox"]', function() {
  alert($(this).attr('id'));
});

这会导致在body上设置点击处理程序，它将处理自身和子元素的点击事件。附加参数用于过滤要过滤的事件，以便只有匹配选择器的子项才会触发处理程序。由于处理程序在body上，因此在创建处理程序时不必存在目标子项。当然，您可以使用更合适的父元素。这在.on()。

中有所描述

Answer 2

嘿试试这个更新的希望它能帮助你

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="NewMerheckbox" id="1"/>
<input type="checkbox" name="NewMerheckbox" id="2"/>
<input type="checkbox" name="NewMerheckbox" id="3"/>
<div id="newcheckbox">

</div>

{{1}}

如何在单击动态创建的同一组复选框时触发事件

2 个答案: