jQuery run function on element loaded via AJAX

Question

I have a project that is loading in replies to a post through a js function:

$('div.discussion_content').each( function() {
    discussion.loadDiscussion($(this));
});

It manages to work great on page-load, but we have an 'infinite scroll' on the page and as I scroll down to get more content (and therefore more discussions), I get nothing.

I have tried the .on() jQuery function ... but on what? I want to call this function immediately upon the element loading and have tried .on('load' ... ) to no avail.

I have tried the .livequery() plugin ...

$('div.discussion_content').livequery(function() { 
    discussion.loadDiscussion($(this)); 
});

Also to no avail.

What I want can't possibly be impossible, or even uncommon ... but I find myself suck without knowing a solution.

Answer 1

If you want to perform an action immediately after insert, then you should probably just have the logic as part of the success handler for the AJAX call.

If you actually want execute this logic on some action on one of the elements, then on() should be your approach. Just note that the on() needs to be attached to a parent element to the dynamically elements which is present at the time the on() function is called. Usage would be like this:

$('#container_available_at_page_load').on('click', '.class_of_dynamic_elements', function() {
    // do something
});

Answer 2

Did you try the scroll event? http://api.jquery.com/scroll/

Answer 3

Have you tryied event delegation?

$(document).on('click','myClickeableDiv', function(){
  //do your thing
});

Answer 4

Those elements doesn't exist on page load, so the "each" statement doesn't effect them. Try to fire the "each" statement after their creation (on the scroll event).

*If you had attach some more code, it could be helpful.