jQuery函数对Ajax追加元素无效，求最佳解决方案

直接绑定事件到动态生成元素的问题在于，这些元素在页面初始加载时并不存在，所以初始的on("click")绑定无法作用于它们。而你提到的两种方法都有明显缺陷：重复绑定冗余且易出错，live()早已被废弃且性能不佳。

正确的做法是利用事件委托——将事件处理器绑定到一个静态存在的父元素（页面加载时就已存在的元素），并指定目标动态元素的选择器。这样，事件会通过DOM冒泡传递到父元素，再由父元素判断触发事件的是否是目标元素，从而执行对应的逻辑。

示例代码 #

假设你有一个静态的容器#static-container，动态元素会被追加到这里：

// 错误的直接绑定（对动态元素无效）
$(".dynamic-btn").on("click", function() {
  alert("点击触发");
});

// 正确的事件委托写法
$("#static-container").on("click", ".dynamic-btn", function() {
  alert("点击触发");
});

关键要点 #

• 尽量选择离动态元素最近的静态父元素，而不是直接用document或body，这样可以减少事件冒泡的层级，提升性能。
• 这种方式适用于所有现代jQuery版本（1.7+，on()方法从1.7开始引入，替代了live()、delegate()等旧方法）。
• 无需在每次追加元素后重新绑定事件，一次绑定即可作用于所有当前及未来生成的目标元素。

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