单击事件不适用于动态生成的 span 元素 ID

Question

我正在处理 To Task 项目。

在这里，我动态添加了项目，还动态地生成了项目。 但是当我想通过单击跨度元素来删除项目时。

此点击无效。

我搜索了关于这个问题的每一个解决方案，但没有一个符合我的要求。

 $("[id^=remove_]").click(function() { alert("working"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="task-list"> <li class="task" id="item_1"><span class="delete-todo" id="remove_1">X</span><span class="main-task">3232</span></li><li class="task" id="item_2"><span class="delete-todo" id="remove_2">X</span><span class="main-task">djkhjsh</span></li> <li class="task" id="item_3"><span class="delete-todo" id="remove_3">X</span><span class="main-task">snsajdsakm</span></li><li class="task" id="item_4"><span class="delete-todo" id="remove_4">X</span><span class="main-task">sahgsabsa\\</span></li> <li class="task" id="item_5"><span class="delete-todo" id="remove_5">X</span><span class="main-task">sjghjdsn</span></li> </ul>

我试过这个。 但它不起作用。 有人可以解释我为什么它不起作用。

注意：我尝试了在 SO 上找到的几种解决方案。

Answer 1

按类而不是 ID 选择删除按钮。 并将代码更改为使用绑定到文档的 .on() 方法，以便可以选择所有元素，如下所示：

$(document).on('click', '.delete-todo', (function() {
    alert("working");
});

Answer 2

将事件委托给所有可点击标签共有的祖先标签。 通过这样做，允许嵌套在祖先标签中的任何标签都可以点击（包括稍后动态添加的标签）。 为了精确定位点击的标签， $(this)始终指向用户当前点击的标签（在这种情况下this = event.target = "currently clicked tag" ）。 通过使用这种模式， #id变得毫无意义，而.class是一个更高效、更通用的选择器。

jQuery 事件委托的剖析

//$('ancestor-selector').on('event', 'target-selector', callback);

<ul class="list">
  <li class="task"><b class="delete">X</b>Item</li>
  <li class="task"><b class="delete">X</b>Item</li>
  <li class="task"><b class="delete">X</b>Item</li>
</ul>

$('.list').on('click', '.delete', deleteTask);

---

演示

演示中评论的详细信息

 /* Delegate the click event (ie .on('click',...)) to the ancestor tag (ie .list) of all clickable tags (ie .delete) NOTE: callback function (ie deleteTask) does NOT have "()" because it is called when the event is triggered. deleteTask() would be triggered immediately (which is not desired) */ $('.list').on('click', '.delete', deleteTask); /* Although this callback function doesn't use the event object, it is passed by default and it's just a personal habit of mine to always include it when defining a callback/event handler. $(this) | in this case points to the tag the user clicked (aka event.target) .closest('.task') | will traverse up the DOM to find the first tag matching .task .remove() | self explanitory */ function deleteTask(event) { $(this).closest('.task').remove(); } /* This code is to dynamically add items to list for demonstration purposes and is not required as part of the solution to OP question */ $('.add').on('click', function(event) { $('.list').append(`<li class='task'><b class='delete'>X</b> Dynamically added list item</li>`); });

 .delete { display: inline-block; padding: 1px 3px; cursor: pointer }

 <ul class="list"> <li class="task"><b class="delete">X</b> 1010</li> <li class="task"><b class="delete">X</b> 2929</li> <li class="task"><b class="delete">X</b> 3838</li> <li class="task"><b class="delete">X</b> 4747</li> <li class="task"><b class="delete">X</b> 5656</li> </ul> <!-- This button is to dynamically add items to list for demonstration purposes and is not required as part of the solution to OP question --> <button class='add'>ADD</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

我尝试运行您附加的代码片段。

1. 当我刚刚点击跨度元素“X”点击事件被触发
2. 当我点击整个 li 元素时，点击事件没有被触发，因为您只为 span 元素定义了点击事件一些使用 ID 触发点击事件的替代方法：

$("#id").click(function(){
 alert('working');
})