如何让 DOM/事件侦听器知道新添加的节点？

Question

TL;DR：

我使用$(..).append(node)，但尽管新添加的节点（假设）匹配 jQuery 选择器，但不考虑包含它们。

问题

我在下面有一些使用复选框但模拟单选按钮行为的代码。换句话说，任何时候只能（有效地）选择一个复选框。最多只能选择一个。

如果您运行下面的示例并单击前 3 个复选框，它们的行为将类似于单选按钮。无论您单击多少，都只会选择一个。

但是，如果你添加点，新添加的点将不会被 JS 考虑，即使理论上它也应该抓住它们......

具体说明：您可以选中新添加的复选框，它会在之前已经选中的复选框之外被选中。这是不正确的，因为在任何时候都应该只选择 1 并且应该取消选择所有其他的。

发生了什么？如何将新添加的节点包含到 jQuery 选择器中？

$(function() {

  //check first box
  $("input.duty:first").prop("checked", true);

  //clicking unchecked box should check that box
  //unchecks all others
  $(".duty").on('click', function(event) {
    $("input.duty").prop("checked", false);
    $(this).prop("checked", true);
  });

  $("#addCasePoint").on("click", function() {
    var newRowIndex = $('#newRowIndex').text();
    var template = $('#casePointTemplate').data('template');
    template = template.replace(/__index__/g, newRowIndex);
    $('#casePointsFieldset').append(template);
    $('#newRowIndex').text(++newRowIndex);
    return false;
  });

  //deletes case point
  $("#selection").on("click", ".removeCase", function() {
    var caseCount = $('#selection .casePointFieldset').length
    if (caseCount === 1) return false; //keep at least one row
    $(this).closest("fieldset").remove();
    return false;
  });
});

.casePointFieldset {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="selection">
  <fieldset id="casePointsFieldset">
    <legend>Case Points</legend>
    <div id="pointFieldset">
      <fieldset class="casePointFieldset">
        <div>
          <label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
        </div>
        <button class="removeCase">Remove</button>
      </fieldset>
      <fieldset class="casePointFieldset">
        <div>
          <label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
        </div>
        <button class="removeCase">Remove</button>
      </fieldset>
      <fieldset class="casePointFieldset">
        <div>
          <label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
        </div>
        <button class="removeCase">Remove</button>
      </fieldset>
    </div>
    <!-- include template -->
    <span id="casePointTemplate" data-template="<fieldset class=&quot;casePointFieldset&quot;><div><label><span>Duty:</span> <input name=&quot;point[__index__]&quot; class=&quot;duty&quot; value=&quot;1&quot; type=&quot;checkbox&quot;></label></div><button class=&quot;removeCase&quot;>Remove</button></fieldset>">
    </span>
  </fieldset>

  <button id="addCasePoint">Add Point</button>
</form>

Answer 1

问题在于您如何绑定到它们。 .click 函数（或.on('click')）基本上是这样工作的：

1. 查找与选择器匹配的所有当前存在的元素 ($('.your.selector.here'))
2. 将事件处理程序附加到每个那些元素

注意我提到它是如何绑定到已经存在的？这意味着它不会自动绑定到新创建的。但是，您可以使用.on 绑定到这些元素的父元素，然后侦听选择器上的事件。我会告诉你我的意思：

$('#addItem').click(function() {
  $('.container').append('<button class="item">Item</button>');
});

// Notice that I'm binding to the parent
// then specifying which events from it's children
// I want to listen to (click events from .item elements)
$('.container').on('click', '.item', function() {
  console.log("I'm an item");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="item">Item</button>
</div>
<button id="addItem">Add New Item</button>

如果您将on('click' 更改为这样工作，那么您将没有问题。

Answer 2

最简单的方法是将事件附加到文档中。过去这是通过live() 方法完成的。

 $(document).on('click', '.duty', function(event) {
      $("input.duty").prop("checked", false);
      $(this).prop("checked", true);
  });