JQuery - 事件委托(delegate) - 我的代码中发生了什么？

标签 jquery event-delegation

我已经阅读了有关事件委托(delegate)的尽可能多的内容，但我无法弄清楚为什么我的代码会这样运行。页面加载时，所有检查按钮都可以正常工作(在 2 个类别之间切换)。每当我将新商品添加到购物 list 时，复选按钮仅适用于该新商品。如果我添加第二个新项目，则复选按钮适用于该新项目(即 4 个原始项目)，但不适用于第一个新项目。如果我添加更多项目，它将不适用于前一个项目，但适用于该项目之前的所有项目。

如何让复选按钮适用于所有项目？

HTML...

<body>

  <div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">
      <li>
        <span class="shopping-item">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">oranges</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item shopping-item__checked">milk</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">bread</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

CSS...

* {
    box-sizing: border-box;
  }

  body {
    font-family: 'Roboto', sans-serif;
  }

  button, input[type="text"] {
    padding: 5px;
  }

  button:hover {
    cursor: pointer;
  }

  #shopping-list-item {
    width: 250px;
  }

  .container {
    max-width: 600px;
    margin: 0 auto;
  }

  .shopping-list {
    list-style: none;
    padding-left: 0;
  }

  .shopping-list > li {
    margin-bottom: 20px;
    border: 1px solid grey;
    padding: 20px;
  }

  .shopping-item {
    display: block;
    color: grey;
    font-style: italic;
    font-size: 20px;
    margin-bottom: 15px;
  }

  .shopping-item__checked {
    text-decoration: line-through;
  }

JS...

//Make the Check Button functional
function checkButton() {
    $(".shopping-item-toggle").on("click", "span", function() {
    $(this).closest("li").find(".shopping-item").toggleClass("shopping-item__checked");
  })};
checkButton();

//Make the Delete Button functional
function delButton() {
    $(".shopping-item-delete").on("click", function() {
    $(this).parent().parent().remove();
  })};
delButton();

  //Create a variable called buttons to add the 2 buttons in function below
  let buttons = "<div class='shopping-item-controls'><button class='shopping-item-toggle'>\
                 <span class='button-label'>check</span></button>\
                 <button class='shopping-item-delete'><span class='button-label'>delete</span></button></div>";

  //Add new Item to List
  $("#js-shopping-list-form").submit(function() {
    let item = $("#shopping-list-entry").val();
    if (item != "") { //As long as the input has text in it, run the function below
    $(".shopping-list").append("<li>" + "<span class='shopping-item'>" + item + "</span>" + buttons + "</li>");
    event.preventDefault();
    checkButton();//Make the check button functional
    delButton();//Make the delete button functional
    } else { //if NO text is in the input, show this alert
      alert("Must enter an item name!");
    }
  });

最佳答案

每当您添加新项目时，新的点击处理程序都会绑定(bind)到所有项目。这意味着页面上存在的项目可能会获得两个或更多重复的处理程序。如果两个处理程序绑定(bind)到一个项目，第一个处理程序将 toggleClass 打开“已检查”类，第二个处理程序将立即关闭该类。

要使用事件委托(delegate)，我建议仅绑定(bind)处理程序一次，并将它们绑定(bind)到页面上始终存在的祖先。

例如:

// Bind "check" and "delete" handlers to the ".shopping-list" ancestor.

$(".shopping-list").on("click", ".shopping-item-toggle span", function() {
  $(this).closest("li").find(".shopping-item").toggleClass("shopping-item__checked");
});

$(".shopping-list").on("click", '.shopping-item-delete', function() {
  $(this).parent().parent().remove();
});


// Create a variable called buttons to add the 2 buttons in function below
let buttons = "<div class='shopping-item-controls'><button class='shopping-item-toggle'>\
                   <span class='button-label'>check</span></button>\
                   <button class='shopping-item-delete'><span class='button-label'>delete</span></button>\
               </div>";

//Add new Item to List
$("#js-shopping-list-form").submit(function(event) {
  event.preventDefault();
  let item = $("#shopping-list-entry").val();
  if (item != "") { // If the input has text in it, add the new item
    $(".shopping-list").append("<li>" + "<span class='shopping-item'>" + item + "</span>" + buttons + "</li>");
  } else { //if NO text is in the input, show this alert
    alert("Must enter an item name!");
  }
});
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list>li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item__checked {
  text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <h1>Shopping List</h1>

  <form id="js-shopping-list-form">
    <label for="shopping-list-entry">Add an item</label>
    <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
    <button type="submit">Add item</button>
  </form>

  <ul class="shopping-list">
    <li>
      <span class="shopping-item">apples</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle"><span class="button-label">check</span></button>
        <button class="shopping-item-delete"><span class="button-label">delete</span></button>
      </div>
    </li>
    <li>
      <span class="shopping-item">oranges</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle"><span class="button-label">check</span></button>
        <button class="shopping-item-delete"><span class="button-label">delete</span></button>
      </div>
    </li>
    <li>
      <span class="shopping-item shopping-item__checked">milk</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle"><span class="button-label">check</span></button>
        <button class="shopping-item-delete"><span class="button-label">delete</span></button>
      </div>
    </li>
    <li>
      <span class="shopping-item">bread</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle"><span class="button-label">check</span></button>
        <button class="shopping-item-delete"><span class="button-label">delete</span></button>
      </div>
    </li>
  </ul>
</div>

以下演示了添加新项目后如何触发多个处理程序:

//Make the Check Button functional
function checkButton() {
  $(".shopping-item-toggle").on("click", "span", function() {
    let $item = $(this).closest("li").find(".shopping-item");
    console.log('Check Handler ' + ($item.hasClass('shopping-item__checked') ? 'OFF' : 'ON'));
    $item.toggleClass("shopping-item__checked");
  })
};
checkButton();

//Make the Delete Button functional
function delButton() {
  $(".shopping-item-delete").on("click", function() {
    console.log('Delete Handler');
    $(this).parent().parent().remove();
  })
};
delButton();

//Create a variable called buttons to add the 2 buttons in function below
let buttons = "<div class='shopping-item-controls'><button class='shopping-item-toggle'>\
                 <span class='button-label'>check</span></button>\
                 <button class='shopping-item-delete'><span class='button-label'>delete</span></button></div>";

//Add new Item to List
$("#js-shopping-list-form").submit(function(e) {
  event.preventDefault();
  let item = $("#shopping-list-entry").val();
  if (item != "") { //As long as the input has text in it, run the function below
    $(".shopping-list").append("<li>" + "<span class='shopping-item'>" + item + "</span>" + buttons + "</li>");
    checkButton(); //Make the check button functional
    delButton(); //Make the delete button functional
  } else { //if NO text is in the input, show this alert
    alert("Must enter an item name!");
  }
});
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list>li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item__checked {
  text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <h1>Shopping List</h1>

  <form id="js-shopping-list-form">
    <label for="shopping-list-entry">Add an item</label>
    <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
    <button type="submit">Add item</button>
  </form>

  <ul class="shopping-list">
    <li>
      <span class="shopping-item">apples</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle"><span class="button-label">check</span></button>
        <button class="shopping-item-delete"><span class="button-label">delete</span></button>
      </div>
    </li>
    <li>
      <span class="shopping-item">oranges</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle"><span class="button-label">check</span></button>
        <button class="shopping-item-delete"><span class="button-label">delete</span></button>
      </div>
    </li>
    <li>
      <span class="shopping-item shopping-item__checked">milk</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle"><span class="button-label">check</span></button>
        <button class="shopping-item-delete"><span class="button-label">delete</span></button>
      </div>
    </li>
    <li>
      <span class="shopping-item">bread</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle"><span class="button-label">check</span></button>
        <button class="shopping-item-delete"><span class="button-label">delete</span></button>
      </div>
    </li>
  </ul>
</div>

关于JQuery - 事件委托(delegate) - 我的代码中发生了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61198095/

上一篇：javascript - 从类方法访问 javascript 中的类属性

下一篇：php - 在 WooCommerce 中选择 "Local Pickup"时，将结帐字段设为可选

相关文章：

javascript - jQuery 类选择器事件绑定(bind)是否将 eventHandler 附加到每个实例？

javascript - 设置 colorbox lightbox ajax href 变量

jquery - 在 Firefox 和 Chrome 中文本更改后无法清除文本区域

javascript - 动态添加到 DOM 的对象不响应 jQuery 事件

javascript - 动态绑定(bind)事件处理程序的最有效方法

javascript - 我可以(在javascript中)编写一个自动应用于一种html标签的事件或函数吗？

javascript - 将动态生成的输入委托(delegate)给预输入

javascript - 单击菜单项时单击单独的链接

javascript - JQuery 日期选择器返回周数和星期几

javascript - 从同一函数中删除单个元素

©2024 IT工具网  联系我们