gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 14:11:56 24 4
gpt4 key购买 nike

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

  • 创建列表元素
  • 删除列表元素
  • 创建列表
  • 删除列表

我了解到动态添加的元素不会绑定(bind)到它们的事件(基于此:Event binding on dynamically created elements?)所以我尝试将事件附加到单个静态祖先。不幸的是,这会导致仅在按下一个按钮时触发每个单击事件。

<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>`

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

最佳答案

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

另请注意,您需要在 olappend() 调用 ,它与 .btnAddListElement 相关 按钮,否则您最终会向每个列表添加一个新的 li 。为此,将 $('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>

关于javascript - 与静态祖先的事件绑定(bind)导致每个点击事件被触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54293218/

24 4 0
文章推荐: javascript - 使用 jquery 为