Question

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

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

Answer 1

这是因为当您绑定该事件时，在{DOM}就绪时不会呈现#chk_select_abst。

对于动态添加的DOM上的绑定事件，您可以bind或delegate在parent DOM节点上的某个位置，您肯定会在页面加载时出现该事件并且从不动态删除/替换。在幕后，这可以使用event bubbling或event propagation。 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>

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

1 个答案: