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

Question

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

在调试期间，断点未击中复选框单击事件。请让我知道如何在这种情况下实现复选框 click/change 事件。

Answer 1

这是因为当您绑定(bind)该事件时，#chk_select_abst 未在 DOM 就绪时呈现。

对于动态添加的 DOM 上的绑定(bind)事件，您可以在其 parent DOM 节点上的某处bind 或 delegate 事件，您肯定会这样做在页面加载时存在并且将永远动态删除/替换。在幕后，这利用了事件冒泡 或事件传播。 Check out this link for more info about bubbling .

一个安全的选择是使用父节点作为body。但是，您可以而且应该使用较低的父节点(在本例中为 #ul_AbandonedStates)来提高性能。

Documentation for jQuery event delegation.

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>