如何用jQuery事件委托绑定点击事件，识别AJAX加载的HTML？

你的核心问题是直接绑定事件仅对页面初始存在的元素有效，AJAX动态加载的新元素不会自动继承原有事件绑定。事件委托可以解决这个问题，不需要用.each遍历元素，而是把事件绑定到一个始终存在的父容器上，由父容器监听子元素的点击事件。

修改后的代码 #

var counter = 0;
// 选择一个页面加载时就存在的父容器（替换成你实际的父容器选择器，比如按钮所在的列表/容器）
var filterContainer = $('.js-discoveries__filter-container');

// 用事件委托绑定点击事件
filterContainer.on('click', '.js-discoveries__theme-filter', function(e) {
    e.preventDefault(); // 按需添加，防止按钮默认跳转等行为
    var selectedTheme = $(this).data('filter'); // 直接获取当前点击元素的data属性
    var selectedThemeUrl = "/discoveries/ajax/type/" + selectedTheme + "/" + counter + "/" + "16";

    // 其他逻辑...

    $.get(selectedThemeUrl, function(data, status) {
        grid.append(data);
    });
});

关键修改点 #

• 移除.each循环：事件委托会自动匹配所有符合选择器的子元素，包括AJAX加载的新元素，无需手动遍历绑定。
• 绑定到稳定父元素：不要直接绑定到动态元素上，而是绑定到页面初始化时就存在的父容器（优先用最近的父元素，性能更优；找不到合适容器时也可以用$(document)）。
• 实时获取data属性：放弃原来通过event.data传递参数的方式，点击时直接从当前元素$(this)读取data-filter，这种方式对初始和动态加载的元素都有效。

额外提示 #

• 确保grid变量是你要插入内容的目标容器，且在当前作用域可访问。
• 不需要再单独调用getDataValueTheme函数，事件委托会自动处理所有符合条件的按钮点击。

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