jQuery动态加载元素后Click事件失效问题求助

问题根源 #

你遇到的问题核心在于：$.load()是异步操作——当执行$(".clickme").bind(...)时，other.html里的按钮还没被加载到DOM中，事件绑定找不到目标元素，自然无法生效。另外，bind()是jQuery旧版方法，现在更推荐用功能更全面的on()替代。

解决方案1：利用load回调绑定事件 #

在load()的回调函数中执行事件绑定，确保动态内容加载完成后再绑定：

$(document).ready(function () {
    $(".loader").load("other.html", function() {
        // 内容加载完成后，给动态元素绑定事件
        $(".clickme").on("click", function () {
            alert("Done!");
        });
    });
});

解决方案2：事件委托（更推荐） #

把事件委托给页面中已存在的父元素（比如.loader或document），动态添加的元素触发事件时会通过冒泡让父元素执行回调：

$(document).ready(function () {
    $(".loader").load("other.html");
    
    // 委托事件到document，监听.clickme的点击
    $(document).on("click", ".clickme", function () {
        alert("Done!");
    });
});

事件委托的优势：后续多次动态加载.clickme元素时，事件无需重复绑定就能生效。

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