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 plexity 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
        });
    });
});

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 plexity 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
        });
    });
});

• javascript
• jquery
• ajax

• .live doesn't actually attach events to elements. It actually listens for events to the entire document, and then see if your 'a' filter matches. – GoldenNewby Commented Mar 15, 2012 at 7:20

3 Answers 3

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 plete.

Elaborating on what GoldenNewby said, listen/attach with the .on() method introduced in jQuery 1.7.

$(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.

{1} - Change 'body' to whatever Container has the ajax data. I.E. #portfolioWrap

Add a callback to the ajax load, good place to start is at http://api.jquery./jQuery.ajax/ under "success callback"

I would have given more specific advice, but your snippet is a bit isolated, maybe if you created a jsfiddle?