如何用jQuery检测通过Ajax加载的<li>元素的点击ID？

你猜的完全没错！问题根源就是动态加载的DOM元素——当你执行$('li').click(...)这段代码时，通过Ajax加载的<li>元素还没被添加到页面中，jQuery根本找不到这些元素，自然没法给它们绑定点击事件。

解决这个问题的核心思路是事件委托：把事件绑定到页面初始就存在的父元素（甚至是document）上，让父元素来监听子元素的点击事件。不管子元素是一开始就有的，还是后来通过Ajax动态加载的，都能正常触发事件。

下面给你两种实用的实现方案：

方案一：绑定到已知的父元素（推荐） #

既然你知道动态<li>都在#income这个<ul>容器里，而且这个容器应该是页面加载时就存在的（不然Ajax加载的内容也没地方插入），直接把事件委托给它就好：

$('#income').on('click', 'li', function() {
    var info = $(this).attr('id');
    alert(info);
});

这种方式性能更优，因为事件只会在#income范围内监听，不会扩散到整个文档。

方案二：绑定到document（通用场景） #

如果不确定父元素的存在状态，或者父元素也是动态加载的，就可以把事件委托给最顶层的document：

$(document).on('click', 'li', function() {
    var info = $(this).attr('id');
    alert(info);
});

不过这种方式的监听范围更大，性能上不如第一种，所以优先推荐方案一。

原理其实很简单：DOM事件是会冒泡的，当你点击动态加载的<li>时，点击事件会向上冒泡到它的父元素#income（或者document），这时候父元素会检查触发事件的是不是我们指定的li元素，如果是，就执行对应的回调函数——这样不管li什么时候被添加到页面，都能正常触发事件啦！

内容的提问来源于stack exchange，提问作者Pawciok