javascript 使用 load() 加载 html 页面后，jQuery 单击事件处理程序不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14339309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery click event handlers don't work after loading html page with load()
提问by Nistor Alexandru
Hi I am loading several html pages on an index page depending on what link was clicked.I have a problem with the links that have asocietted click event handlers.It seems that after the jQuery loads the html file the links in that html do not have there click event handlers binded to them. Here is my code:
嗨，我正在索引页上加载几个 html 页面，具体取决于单击的链接。我对具有关联的单击事件处理程序的链接有问题。似乎在 jQuery 加载 html 文件后，该 html 中的链接没有点击事件处理程序绑定到它们。这是我的代码：
This is the html for one of the links that does not work:
这是不起作用的链接之一的 html：
<a href="#" id="NavContactPage" data-sectionId="Skills">skills</a>
This is the jquery code asocieted with it:
这是与之相关的 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;
})
How can I solve this problem?
我怎么解决这个问题？
回答by t.niese
$("selector").click(...)only registers the callbacks for the clickevent to the elements that where visible to jQuery at the time you did the query. So for newly added elements, that match this selector, the callback will not be applied.
$("selector").click(...)仅将click事件的回调注册到在您执行查询时对 jQuery 可见的元素。因此，对于与此选择器匹配的新添加元素，将不会应用回调。
You either need to registrate the callbacks to the newly added elements again or you need to use:
您要么需要重新注册对新添加元素的回调，要么需要使用：
$(document).on('click',"nav a , a.first_anchor , a#NavContactPage", ... );
$(document).on('click',"nav a , a.first_anchor , a#NavContactPage", ... );
Instead of using document as root it is recommend to use e.g. the element where you are loading the content to as root e.g. $("div#Content").on( .... );
建议使用例如您将内容加载到的元素作为根，而不是使用文档作为根，例如 $("div#Content").on( .... );
回答by A. Wolff
As i understand it, you should use delegation with .on():
据我了解，您应该将委托与 .on() 一起使用：
$(document).on('click',"nav a , a.first_anchor , a#NavContactPage",function(){...}
回答by Cutz Clutso
came across this problem when I was using the .load() function to import html into my main page. I put this inside my ready function and it worked for me
当我使用 .load() 函数将 html 导入到我的主页时遇到了这个问题。我把它放在我的就绪函数中，它对我有用
$(document).on('click','#btninsertrequest',function(){
alert("yes");
});
回答by Durgesh
Are u binding ur events on jquery ready ?
你准备好在 jquery 上绑定你的事件了吗？
Your event binding code should be inside and use on instead of click. I think that should solve ur problem.
您的事件绑定代码应该在里面并使用 on 而不是 click。我认为这应该可以解决您的问题。
$(function(){
// Bind event here
});
