Question

我正在构建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.建议的解决方案。和Ohgodwhy应该工作，但可能是由于网站的复杂性和插件限制，我无法使它们工作。例如，.on函数根本不起作用，尽管我使用的是jQuery 1.7.1。最后，我实现了Just_Mad建议的ajaxComplete，并且有效。谢谢大家的帮助！

这是代码：

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

Answer 1

详细说明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'更改为任何Container具有ajax数据。 I.E. #portfolioWrap

Answer 2

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

Answer 3

在ajax加载中添加一个回调，在“成功回调”下的http://api.jquery.com/jQuery.ajax/开始的好地方

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

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

3 个答案: