javascript - 使用 load() 加载 html 页面后，jQuery 单击事件处理程序不起作用

Question

您好，我正在根据单击的链接在索引页面上加载多个 html 页面。我对具有相关点击事件处理程序的链接有疑问。似乎在 jQuery 加载 html 文件后，该 html 中的链接没有绑定(bind)到它们的单击事件处理程序。 这是我的代码:

这是其中一个无效链接的 html:

<a href="#" id="NavContactPage" data-sectionId="Skills">skills</a>

这是与之相关的 jquery 代码:

$("nav a , a.first_anchor , a#NavContactPage").click(function(){
    var id = $(this).attr("data-sectionId");
    var link = "load/" + id + ".html";

    $("div#Content").load(link , function(){
        $("section#" + id).fadeIn(); 
        if(id === "Portfolio"){
            $('div.slide').cycle('fade');
        }
        if(id === "Home"){
            $("#jcycleslider").cycle({
                fx: mtransition,
                easing: easing,
                before: onBefore,
                after: onAfter,
                speed: mpace,
                timeout: mnext,
                sync: msync,
                randomizeEffects:0,
                pager:'#jslider_nav'
            })
            $("#jslider_nav a").text("");
        }    
    })      
    return false;
})

我该如何解决这个问题？

Answer 1

$("selector").click(...) 仅将 click 事件的回调注册到您当时对 jQuery 可见的元素做了查询。所以对于新添加的元素，匹配这个选择器，回调将不会被应用。

你要么需要重新注册回调到新添加的元素，要么你需要使用:

$(document).on('click',"nav a , a.first_anchor , a#NavContactPage", ... );

建议使用例如，而不是使用文档作为根目录。您将内容加载到的元素作为根元素，例如$("div#Content").on(....);