关于jQuery HTML选择器局限性的咨询：动态添加<li>无法被检测

嗨，这个问题我当初刚上手jQuery的时候也踩过一模一样的坑！其实jQuery并没有维护一份静态的HTML标签列表，问题的核心出在事件绑定的时机和方式上，咱们一步步拆解：

为什么新添加的<li>没反应？ #

你一开始写的代码大概是这样的：

$(document).ready(function(){
  $('li').click(function(){
    // 在当前li前后添加新元素
    $(this).before('<li>新添加的元素</li>');
    $(this).after('<li>新添加的元素</li>');
  });
});

这种写法的问题在于：当页面加载完成时，jQuery会找到此时已经存在于DOM中的所有<li>元素，给它们逐个绑定点击事件。而你后来动态添加的<li>是在页面加载之后才生成的，它们根本没机会被这个$('li').click()的绑定操作覆盖到，所以点击自然没反应。

怎么解决？用「事件委托」 #

事件委托利用了DOM事件冒泡的特性——我们可以把点击事件绑定到一个始终存在的父元素上（比如包裹<li>的<ul>，甚至是最顶层的document），然后指定要监听的目标元素。这样不管是初始就有的<li>，还是后来动态添加的<li>，只要点击事件冒泡到父元素，就会被正确触发。

修改后的代码大概是这样：

$(document).ready(function(){
  // 把事件绑定到父元素ul上，监听li的点击
  $('ul').on('click', 'li', function(){
    $(this).before('<li>新添加的元素</li>');
    $(this).after('<li>新添加的元素</li>');
  });
});

这里的on方法第二个参数'li'是一个过滤选择器，它的作用是：当父元素ul接收到点击事件时，检查触发事件的元素是不是<li>，如果是，就执行回调函数。这样不管什么时候添加的<li>，只要它是这个ul的子元素，点击都会生效。

额外小提示 #

• 尽量选择离目标元素最近的父元素作为事件委托的载体，不要直接绑定到document上，这样能减少事件冒泡的层级，提升一点性能。
• 事件委托不仅适用于点击事件，其他如hover、change等事件也同样适用，是处理动态DOM元素事件的标准方案。

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