jQuery与AJAX追加数据交互异常：.on方法绑定事件失效求助

嘿，这个问题我太熟了——你遇到的是jQuery事件委托里常见的「动态元素绑定失效」问题，咱们一步步来理清楚：

问题根源 #

你现在的事件委托代码是绑定在.card元素上的：

$('.card').on('click','.add-exercise', function() { alert('clicked'); });

但如果.card本身也是通过AJAX动态添加到DOM中的，那当页面初始化执行$(function(){...})时，这个.card元素还不存在，事件委托的绑定自然就失效了。事件委托的核心要求是：委托的父元素必须是页面加载时就已经存在于DOM中的静态元素，这样后续动态添加的子元素才能通过事件冒泡触发绑定的事件。

解决方案 #

方案1：绑定到更高层级的静态元素

最稳妥的方式是绑定到document（页面加载时就存在的顶级元素），或者选择离目标元素最近的静态父容器（性能更好）：

$(function() {
  // 改用document作为委托对象，确保它一开始就存在
  $(document).on('click','.add-exercise', function() {
    alert('clicked');
  });

  // 你的其他代码保持不变
  $('#search').on('keyup', function(e){
    if(e.keyCode == 13) {
      console.log('hit enter key');
      $(this).trigger("enterKey");
    }
  });

  $('#search').on("enterKey",function(e){
    $.ajax({
      // 你的AJAX配置内容...
    });
  });
});

方案2：确认.card是静态元素（如果适用）

如果.card是页面加载时就存在的，只是内部的.add-exercise是动态添加的，那你原来的代码理论上是有效的，但需要排查以下几点：

• 确认AJAX返回的HTML中，确实包含带有.add-exercise类的元素
• 检查是否有其他JS代码调用了stopPropagation()阻止了事件冒泡
• 确认页面初始化时.card已经存在于DOM中（不是AJAX异步加载的）

小提示 #

尽量避免直接绑定到document，最好找一个离目标元素最近的、页面加载时就存在的父容器，这样事件冒泡的层级更少，性能更优。比如页面有一个静态的#app-container容器，就可以改成：

$('#app-container').on('click','.add-exercise', function() { alert('clicked'); });

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