jQuery动态事件绑定：解决on()方法对动态生成元素失效的问题-js教程-PHP中文网

jQuery动态事件绑定：解决on()方法对动态生成元素失效的问题

当使用jquery的on()方法为动态加载的dom元素（如ajax返回的按钮）绑定事件时，若元素在页面初始化时尚未存在，则直接绑定会失败；需采用事件委托方式，将监听器挂载到静态父容器或document上，并指定选择器过滤目标元素。

当使用jquery的on()方法为动态加载的dom元素（如ajax返回的按钮）绑定事件时，若元素在页面初始化时尚未存在，则直接绑定会失败；需采用事件委托方式，将监听器挂载到静态父容器或document上，并指定选择器过滤目标元素。

在你的代码中，#add-to-db 按钮是在 get-info-results.php 响应后动态插入到 #get-info-results 容器中的，而 $("#add-to-db").on("click", ...) 这行脚本在页面加载时立即执行——此时该按钮尚未存在于DOM中，jQuery无法找到匹配元素，因此事件监听器根本未被注册，点击自然无响应。

✅ 正确做法是使用事件委托（Event Delegation）：将事件监听器绑定在始终存在的祖先元素（如 document、body 或更近的静态容器）上，并通过第二个参数传入目标选择器（如 '#add-to-db'）。这样，当事件冒泡至该祖先节点时，jQuery会动态判断触发源是否匹配选择器，从而正确执行回调。

推荐写法（安全、简洁、符合最佳实践）：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

// ✅ 推荐：委托到 document（确保全局可用）
$(document).on('click', '#add-to-db', function(e) {
    e.preventDefault(); // 可选：防止默认行为（如button类型为submit时）
    $("#add-to-db-results").load("/add-results-to-db.php", {
        // 传递所需 POST 数据，例如：
        // name: $("#name-input").val(),
        // id: $("#get-info-results").data("item-id")
    });
});

// ✅ 更优：委托到就近的静态父容器（性能略高，减少事件冒泡路径）
// 假设 #get-info-results 在页面加载时已存在且不会被完全替换
$("#get-info-results").on('click', '#add-to-db', function(e) {
    e.preventDefault();
    $("#add-to-db-results").load("/add-results-to-db.php", { /* data */ });
});

⚠️ 注意事项：