Question

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.

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?

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 .on function didn’t work at all although I’m using jQuery 1.7.1. At the end I implemente ajaxComplete suggested by Just_Mad and that worked. Thank you all for your help!

This is the code:

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

Answer 1

If you use jQuery.ajax to load AJAX content you can try to bind to ajaxComplete event, to get the moment, when any ajax is complete.