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

Question

嗨我在索引页面上加载了几个html页面,具体取决于点击了什么链接.我有一个问题,链接有asocietted单击事件处理程序.似乎在jQuery加载html文件后,该html中的链接没有点击事件处理程序绑定到他们.这是我的代码:

这是其中一个不起作用的链接的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", ... );

不是以root身份使用文档,而是建议使用例如将内容加载到的元素作为root用户 $("div#Content").on( .... );

Answer 2

据我了解，您应该将委托与 .on() 一起使用：

$(document).on('click',"nav a , a.first_anchor , a#NavContactPage",function(){...}