时间戳

首页 > 解决方案 > 与静态祖先的事件绑定导致触发每个点击事件

javascript - 与静态祖先的事件绑定导致触发每个点击事件

问题描述

我创建了一个小型测试应用程序，应该允许用户创建：

我了解到动态添加的元素不会将事件绑定到它们（基于此：动态创建元素上的事件绑定？）所以我尝试将事件附加到单个静态祖先上。不幸的是，这会导致每一个点击事件都在按下一个按钮时被触发。 

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <title>Test Page</title>
</head>
<body>
    <div id="container">
        <div class="listContainer">
            <ol>
                <li>First list <button class="btnDeleteListItem">Delete</button></li>
                <li>First list <button class="btnDeleteListItem">Delete</button></li>
                <li>First list <button class="btnDeleteListItem">Delete</button></li>
            </ol>
            <button class="btnAddListElement">+Add List Item</button>
            <button class="btnDeleteList">Delete List</button>
        </div>
        <button class="btnAddList">+Add List</button>
    </div>
</body>
<script>
var btnDeleteListItem = $(".btnDeleteListItem");
var btnAddListElement = $(".btnAddListElement");
var btnDeleteList = $(".btnDeleteList");
var btnAddList = $(".btnAddList");
var container = $("#container");

container.on("click",btnDeleteListItem, function (e) {
    $(this).parent().remove();
    console.log("list item deleted");
});

container.on("click",btnAddListElement, function (e) {
    var html = '<li> Just added <button class="btnDeleteListItem">Delete</button></li>';
    $("ol").append(html);
    console.log("list item added");
});

container.on("click",btnDeleteList, function (e) {
    $(this).parent().remove();
    console.log("list deleted");
});

btnAddList.on("click", function(e){
    var html = '<div class="listContainer"><ol><li>Other list <button class="btnDeleteListItem">Delete</button></li><li>Other list <button class="btnDeleteListItem">Delete</button></li><li>Other list <button class="btnDeleteListItem">Delete</button></li></ol><button class="btnAddListElement">+Add List Item</button><button class="btnDeleteList">Delete List</button></div>';
    $(html).insertBefore($(this));
    console.log("list added");
});
</script>

</html>`

有没有办法隔离点击事件？

标签： javascriptjqueryuielement

解决方案

问题在于，尽管您使用的是委托事件处理程序，但您只是在加载 DOM 时选择元素。on()要解决此问题，请将选择器参数作为字符串传递。这样，选择器将在click事件通过 冒泡时匹配#container，而不仅仅是特定元素实例。

另请注意，您只需要在与单击的按钮相关的按钮上进行append()调用，否则您最终会在每个列表中添加一个新的。为此，请更改为。ol.btnAddListElementli$('ol')$(this).prev('ol')

var $container = $("#container");

$container.on("click", ".btnDeleteListItem", function(e) {
  $(this).parent().remove();
  console.log("list item deleted");
});

$container.on("click", '.btnAddListElement', function(e) {
  var html = '<li> Just added <button class="btnDeleteListItem">Delete</button></li>';
  $(this).prev("ol").append(html);
  console.log("list item added");
});

$container.on("click", '.btnDeleteList', function(e) {
  $(this).parent().remove();
  console.log("list deleted");
});

$container.on('click', '.btnAddList', function(e) {
  var html = '<div class="listContainer"><ol><li>Other list <button class="btnDeleteListItem">Delete</button></li><li>Other list <button class="btnDeleteListItem">Delete</button></li><li>Other list <button class="btnDeleteListItem">Delete</button></li></ol><button class="btnAddListElement">+Add List Item</button><button class="btnDeleteList">Delete List</button></div>';
  $(html).insertBefore($(this));
  console.log("list added");
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<div id="container">
  <div class="listContainer">
    <ol>
      <li>First list <button class="btnDeleteListItem">Delete</button></li>
      <li>First list <button class="btnDeleteListItem">Delete</button></li>
      <li>First list <button class="btnDeleteListItem">Delete</button></li>
    </ol>
    <button class="btnAddListElement">+Add List Item</button>
    <button class="btnDeleteList">Delete List</button>
  </div>
  <button class="btnAddList">+Add List</button>
</div>

推荐阅读