javascript Ajax页面加载后如何执行jQuery函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9715351/
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
How to execute jQuery function after Ajax page load
提问by Klikerko
I'm building Wordpress website where all content pages are loaded using Ajax. This is causing me a problem with jQuery localScroll plugin. This plugin will add animated scroll to all anchor links on the page. Problem is that using script below I'm able to have animation on that page only after one of the links on the page is clicked.
我正在构建 Wordpress 网站，其中所有内容页面都使用 Ajax 加载。这导致我在使用 jQuery localScroll 插件时出现问题。此插件将为页面上的所有锚链接添加动画滚动。问题是，使用下面的脚本，只有在单击页面上的链接之一后，我才能在该页面上播放动画。
I think I understand why is this happening. My guess is that after I click on the main menu script will execute but since Ajax content is not yet loaded events are not attached to Ajax loaded content links. Now I'm stuck, I have no clue how to fix this. Would you mind helping me with this one?
我想我明白为什么会这样。我的猜测是，在我点击主菜单后，脚本将执行，但由于 Ajax 内容尚未加载，事件不会附加到 Ajax 加载的内容链接。现在我被卡住了，我不知道如何解决这个问题。你介意帮我解决这个问题吗？
Thank you in advance.
先感谢您。
$(function(){
$('a').live('click', function() {
$('#portfolioWrap').localScroll({// Only the links inside that jquery object will be affected
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
EDIT
编辑
Just a note to others after I managed to make this work. I tried all suggestions here. My guess is that solutions suggested by o.v. and Ohgodwhy should work, but probably due to website complexity and maybe plugin limitations I wasn't able to make them work. For example .onfunction didn't work at all although I'm using jQuery 1.7.1. At the end I implemente ajaxCompletesuggested by Just_Mad and that worked. Thank you all for your help!
在我设法完成这项工作后，只是给其他人一个便条。我在这里尝试了所有建议。我的猜测是 ov 和 Ohgodwhy 建议的解决方案应该可行，但可能由于网站复杂性和插件限制，我无法使它们工作。例如.on，尽管我使用的是 jQuery 1.7.1，但函数根本不起作用。最后，我实现ajaxComplete了 Just_Mad 的建议并且奏效了。谢谢大家的帮助！
This is the code:
这是代码：
$(function() {
$('#wrapperIn').ajaxComplete(function() {
$('#portfolioWrap').localScroll({
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
采纳答案by Just_Mad
If you use jQuery.ajax to load AJAX content you can try to bind to ajaxCompleteevent, to get the moment, when any ajax is complete.
如果您使用 jQuery.ajax 加载 AJAX 内容，您可以尝试绑定到ajaxComplete事件，以获取任何 ajax 完成的时刻。
回答by Ohgodwhy
Elaborating on what GoldenNewby said, listen/attach with the .on() method introduced in jQuery 1.7.
详细说明 GoldenNewby 所说的，使用 jQuery 1.7 中引入的 .on() 方法收听/附加。
$(function(){
$('body').on('click', 'a', function() {
$('#portfolioWrap').localScroll({
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
No need to use AJAX for callbacks for listening/binding to elements. The above function will place a click function on all elements found within the body{1} at/after page load. This includes all dynamically created links.
无需使用 AJAX 进行侦听/绑定元素的回调。上述函数将在页面加载时/之后在body{ 1} 中找到的所有元素上放置一个点击函数。这包括所有动态创建的链接。
{1} - Change 'body' to whatever Container has the ajax data. I.E. #portfolioWrap
{ 1} - 将“body”更改为具有 ajax 数据的任何容器。IE #portfolioWrap
回答by o.v.
Add a callback to the ajax load, good place to start is at http://api.jquery.com/jQuery.ajax/under "success callback"
向 ajax 加载添加回调，开始的好地方是http://api.jquery.com/jQuery.ajax/下的“成功回调”
I would have given more specific advice, but your snippet is a bit isolated, maybe if you created a jsfiddle?
我会给出更具体的建议，但是您的代码段有点孤立，也许您创建了一个 jsfiddle？
