如何为AJAX动态生成的Button_2绑定jQuery点击事件？

这是前端开发里非常常见的一个坑——你遇到的问题根源在于：页面加载完成（document.ready）时，Button_2还不存在于DOM中，所以你当时直接给它绑定的点击事件根本找不到目标元素，自然不会生效。

核心解决方案：事件委托（Event Delegation） #

jQuery的事件委托机制可以完美解决这个问题。它的原理是把事件绑定到一个页面加载时就已经存在的父元素（甚至是document）上，然后通过指定子元素选择器，来监听后续动态添加的子元素的事件。这样不管子元素什么时候被插入DOM，只要它在这个父元素范围内，事件就能被触发。

结合你的代码修改示例 #

假设你把AJAX返回的Button_2插入到某个固定容器（比如#button_container）里，修改后的代码如下：

jQuery(document).ready(function($){
  // Button_1的点击事件（页面加载时已存在，直接绑定没问题）
  $('#button_1').click(function(e){
    e.preventDefault();
    var id = $(this).data('id');
    $.ajax({
      type: 'POST',
      url: 'get_button_2.php',
      data: 'id='+id,
      dataType: 'html'
    })
    .done(function(response){
      // 把返回的Button_2插入到页面容器中
      $('#button_container').html(response);
    });
  });

  // 用事件委托绑定Button_2的点击事件
  // 推荐绑定到离Button_2最近的、初始就存在的父元素（比如#button_container），比绑定到document性能更好
  $('#button_container').on('click', '#button_2', function(e){
    e.preventDefault();
    // 这里写Button_2点击后的业务逻辑
    alert('Button_2被成功触发啦！');
    // 比如你可以在这里继续发起AJAX请求或者做其他操作
  });
});

为什么这样能生效？ #

事件委托利用了DOM的事件冒泡特性：当你点击动态添加的Button_2时，点击事件会向上冒泡到它的父容器（#button_container），父容器会检查触发事件的元素是否匹配#button_2这个选择器，如果匹配，就执行你写的回调函数。

小提示 #

• 尽量不要把事件委托绑定到document或body上，优先选择离目标元素最近的、初始就存在的父元素，这样能减少事件冒泡的层级，提升性能。
• 如果你不确定父元素是什么，用document作为兜底也没问题，但性能上会稍差一点。

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