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

丹尼斯

特尔;博士:

我使用$(..).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>

麦克·克拉克

问题是你如何绑定它们。.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'的工作方式,那么你就不会有问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在的IntelliJ插件添加事件侦听器?

在调试时或从JavaScript代码中如何在DOM节点上查找事件侦听器?

如何在一个div的所有子节点和这些div的数组中添加事件侦听器?

如何添加触发将某种类型的元素添加到DOM的事件侦听器?

如何使事件DOM侦听器适应Google Maps JavaScript API v3.35

如何为所有滚动事件添加侦听器?

如何将事件侦听器添加到动态创建的HTML列表元素?

如何为活动添加事件侦听器AnyChart 8

如何将事件侦听器添加到Redux表单

如何添加JSON中提到的“单击”事件侦听器或访问“引用”

如何使用jquery .each()添加单个事件侦听器?

iOS UIWebView:如何将侦听器添加到DOM事件?

如何将侦听器事件添加到由DefaultListModel对象添加的JList元素?

如何从外部控制器向事件添加事件侦听器?

节点发射器:如何正确设计事件侦听器

如何在DOM元素上查找事件侦听器列表?

如何使用 redux-observable 在 dom 元素上添加事件侦听器

如何删除 iFrame 添加的 beforeunload 事件侦听器?

如何简化 javascript 事件侦听器?

如何向使用 ES6 模板文字创建的元素添加函数/事件侦听器?

如何将 updateend 事件侦听器添加到两个对象?

如何为每个元素添加唯一的事件侦听器

className加载dom后如何设置事件侦听器

如何在尚未在 DOM [no-jQuery] 中的元素上添加事件侦听器?

如何减慢节点 JS 事件侦听器的速度?

如何向 React 组件添加事件侦听器?

Sweet Alert - 如何添加事件侦听器?

如何删除事件侦听器

如何使用 jQuery 在类构造函数上添加事件侦听器?