Rails应用中动态DOM的事件绑定问题及优化方案咨询

直接用.click()绑定事件的问题在于，它只会把事件绑定到执行代码时已存在的DOM元素上，后续通过append、AJAX新增的元素（比如按钮C）因为绑定事件时还没生成，自然没有对应的事件处理逻辑。不用每次新增元素都重新绑定，最省心的方案是用事件委托。

核心实现：用jQuery的.on()方法做事件委托 #

事件委托利用DOM的事件冒泡机制，把事件绑定到一个始终存在的静态父元素上，由父元素监听事件，再根据触发事件的目标元素是否匹配指定选择器，来决定是否执行处理逻辑。

代码示例 #

原来的直接绑定写法：

$(".btn").click(function() {
  console.log("按钮被点击了");
});

改成事件委托写法（假设按钮都放在#btn-container这个静态容器里）：

// 绑定到静态父容器，监听click事件，只对.btn元素触发
$("#btn-container").on("click", ".btn", function() {
  console.log("按钮被点击了");
});

如果没有合适的静态父容器，也可以用document作为委托对象（不推荐过度使用，性能略差）：

$(document).on("click", ".btn", function() {
  console.log("按钮被点击了");
});

关键注意事项 #

• 优先选择近层父元素：尽量找离动态元素最近的、页面加载时就存在的父容器，减少事件冒泡的层级，提升性能。
• 只绑定一次：事件委托只需要在页面初始化时执行一次即可，不需要在AJAX/append的回调里重复绑定。
• 旧版jQuery兼容：如果项目用的是jQuery 1.7之前的版本，可以用.delegate()方法替代，语法类似：

  $("#btn-container").delegate(".btn", "click", function() {
    console.log("按钮被点击了");
  });
  

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