复选框单击时未触发下拉列表复选框事件

Question

我在数据表的标题上有一个dropdown列表。 该列表具有多个checkbox ，当该复选框处于checked或未unchecked时，我想调用一个事件。

在调试过程中，断点未达到复选框的click事件。 请让我知道在这种情况下如何实现复选框click/change事件。

Answer 1

这是因为绑定该事件时，在DOM准备就绪时未渲染#chk_select_abst 。

对于在动态添加的DOM上绑定事件，您可以在parent DOM节点上的某个位置bind或delegate该事件，您确定该事件将在页面加载时出现，并且永远不会动态删除/替换。 在幕后，这利用了event bubbling或event propagation 。 查看此链接以获取有关冒泡的更多信息 。

安全的选择是将父节点用作body 。 但是，您可以并且应该使用较低的父节点（在这种情况下为#ul_AbandonedStates ）来提高性能。

jQuery事件委托的文档。

 var json = { abandonState: [{ Name: 'name 1', Value: 'value 1' }, { Name: 'name 2', Value: 'value 2' }] } function addCheckBox() { if (json) { if (json.abandonState) { var abandonedStates = json.abandonState; var li = $('<li>'); var select = $("<label><input id='chk_select_abst' type='checkbox' class='abandonstatecheckclass' value='-1' name='Select All' /> Select All</label>"); var res = li.append(select); $('#ul_AbandonedStates').append(res); $.each(abandonedStates, function(index, item) { var li = $('<li>'); var chk = $("<label><input id='chk_" + item.Value + "' type='checkbox' class='abandoncheckclass' value='" + item.Value + "' name='" + item.Name + "' />" + item.Name + "</label>"); var res = li.append(chk); $('#ul_AbandonedStates').append(res); }); var li = $('<li>'); var btn = $('<button id="ul_AbandonedStates_ok" class="btn btn- primary btn- xs" type="button" value="OK">OK</button>'); var res = li.append(btn); $('#ul_AbandonedStates').append(res); } } } $(document).ready(function() { //change here $("#ul_AbandonedStates").on("click", "#chk_select_abst", function() { $("#ul_AbandonedStates input:checkbox").prop('checked', $(this).prop('checked')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <th align="center" width="13%" style="position:relative;" index=6 name="abandonedState"> Abandon State <div class="down-arrow-wrapper"> <a href="#" class="down-arrow" id="da-abandonstate"></a> <ul class="checkbox-list" id="ul_AbandonedStates"></ul> </div> <th> </table> <button class="add" onclick="addCheckBox()">Add List</button>