jquery - 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被单击的元素（与第二个选择器匹配的元素。

阅读有关使用 jQuery 进行直接和委托事件处理的更多信息。