單擊事件不適用於動態生成的 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');
})