如何在Ajax页面加载后执行jQuery函数

How to execute jQuery function after Ajax page load

本文关键字：执行 jQuery 函数 加载 Ajax      更新时间：2023-09-26

我正在构建Wordpress网站，所有内容页面都使用Ajax加载。这给我带来了jQuery localScroll插件的问题。这个插件将为页面上的所有锚链接添加动画滚动。问题是，使用下面的脚本，我只能在点击页面上的一个链接后才能在该页面上播放动画。

我想我明白为什么会发生这种事。我的猜测是，在我点击主菜单后，脚本将执行，但由于Ajax内容尚未加载，事件未附加到Ajax加载的内容链接。现在我被卡住了，我不知道如何解决这个问题。你介意帮我做这个吗？

提前谢谢。

$(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
        });
    });
});

编辑

只是在我成功完成这项工作后给其他人的一封信。我试过了这里的所有建议。我的猜测是，o.v.和Ohgodh为什么提出的解决方案应该有效，但可能是由于网站的复杂性和插件的限制，我没能让它们发挥作用。例如，虽然我使用的是jQuery 1.7.1，但.on函数根本不起作用。最后，我实现了Just_Mad提出的ajaxComplete，并取得了成功。谢谢大家的帮助！

这是代码：

$(function() {
    $('#wrapperIn').ajaxComplete(function() {
        $('#portfolioWrap').localScroll({
            target: '#portfolioWrap', // The element that gets scrolled
            axis:'y', // Horizontal scrolling
            duration:1500
        });
    });
});

如果您使用jQuery.ajax加载ajax内容，您可以尝试绑定到ajaxComplete事件，以获得任何ajax完成的时刻。

详细说明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
    });
  });
});

无需将AJAX用于侦听/绑定元素的回调。上述函数将在页面加载时/之后，在正文｛1｝中找到的所有元素上放置一个单击函数。这包括所有动态创建的链接。

｛1｝-将"body"更改为容器中包含ajax数据的内容。I.E.#portfolioWrap

向ajax加载添加回调，好的起点是http://api.jquery.com/jQuery.ajax/在"成功回调"下

我会给出更具体的建议，但你的片段有点孤立，也许如果你创建了一个jsfiddle？

相关文章：