使用load()加载HTML页面后，jQuery点击事件处理程序无法工作

Question

嗨，我正在根据所点击的链接加载多个HTML页面到索引页面上。我遇到了使用关联点击事件处理程序的链接的问题。似乎在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;
})

我该如何解决这个问题？

- Nistor Alexandru

---

新加载的页面中是否有 #NavContactPage 链接？它会覆盖之前的链接吗？ - Skatox

是的，它有 #NavContactPage。 - Nistor Alexandru

Answer 1

$("selector").click(...) 只会为那些在您查询时对 jQuery 可见的元素注册 click 事件的回调函数。因此，对于新添加的匹配该选择器的元素，回调将不会被应用。

您需要重新将回调函数注册到新增的元素，或者使用：

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

建议使用加载内容的元素作为根元素，而不是使用 document 作为根元素，例如：$("div#Content").on( .... );

- t.niese

Answer 2

据我理解，在使用.on()时，应该使用委托：

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

- A. Wolff

Answer 3

当我使用.load()函数将HTML导入我的主页面时，遇到了这个问题。我将它放在我的ready函数中，这对我有用。

$(document).on('click','#btninsertrequest',function(){
alert("yes");
}); 

- Cutz Clutso

Answer 4

你是否在jQuery准备好后绑定事件？

你的事件绑定代码应该放在里面，并使用on而不是click。我认为这应该可以解决你的问题。

$(function(){

  // Bind event here

});

- Durgesh