jQuery的click事件不适用于动态生成的li

Question

有人可以看一下这段代码 ，其中每个功能都能完美运行，但是只有click事件（在代码的最后）

 $('ul#showUsernames li').on('click', function () {
    selectedUsername = $(this).text();
    if (selectedUsername != chatUsername) {
        chatTitleName.text("Chat between " + chatUsername + " and " + selectedUsername);
    }
 });

在这里，我使用了.click和bind('click',function它们也无法正常工作的bind('click',function 。

我on这里使用on因为我是通过jQuery 动态生成li元素的。

我不确定这是否很重要，因为我在项目中使用SignalR。

请帮忙。

Answer 1

使用事件委托与on()

$('#showUsernames').on('click', 'li', function () {
   ...

这也适用于动态插入的列表项，并且性能更高（因为您在ul上附加了单个事件处理程序，而不是在li元素上附加了n个处理程序。

作为旁注，只需使用$('#showUsernames')而不是$('ul#showUsernames')因为它更快（就像直接使用getElementById ）

Answer 2

使用on（）

$('ul#showUsernames').on('click', 'li', function () {

Answer 3

你可以使用Jquery Live

$('li ul#showUsernames').live('click',function () {

也可以使用，因为live可以使用（感谢@Mr_Green）

$('ul#showUsernames').on('click', 'li', function () {

Answer 4

使用live()

例：

$(".button").live("click", function() {
});

确保也调用die() ，如下所示：

$(".button").die();

die（）将防止您的事件多次触发。 如果您的内容多次异步加载而没有同步重新加载整个页面，则会发生这种情况。 这是因为旧的处理程序保留在浏览器的内存中，并且也会被触发（简单的说明）。

希望能帮助到你。