jQuery：綁定到列表項與列表本身的問題

Question

我有一個無序列表。當用戶點擊一個項目時，它會調用一個函數。我使用$(document).ready()事件將函數綁定到列表項。

我遇到的問題是，使用$('#list').html()方法（使用AJAX）不時替換列表中的內容。這意味着每個項目的綁定都會丟失。

我試着將函數綁定到列表（而不是項目）。這工作正常，除了this然後是對列表的引用，而不是點擊的項目，並且我在我的函數中使用this。

我看到的選項：

1. 列表中的內容重新加載後，函數重新綁定到每個項目。在我看來，瀏覽器必須做很多工作。
2. 將函數綁定到列表（而不是列表項），並計算出如何從那裏引用單擊的列表項。

你會用哪一種？怎麼樣？有沒有更好的辦法？

謝謝！

Answer 1

您提到的第二點叫做事件代表團，並且這將是一個很好的解決方案。幸運的是，jQuery讓事件委派非常簡單：

$('#myList').on('click', 'li', function(){ 
    // `this` refers to the clicked `li` element 
}); 

jQuery的數字爲你參考，即在事件處理程序this將把被點擊（即第二選擇相匹配的元素li元素中

Read more about direct and delegated event handling with jQuery.