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.

score 3 · Accepted Answer · answered Feb 26 '13 at 20:55

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

Not sure why it never occurred to me to duplicate the statement in the AJAX success function ... thank you, I'll try that out. I'd upvote, but I don't have the reputation to do so. — Kenneth Ahlstrom, Feb 27 '13 at 00:16

score 0 · Answer 2 · answered Feb 26 '13 at 20:53

0

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

answered Feb 26 '13 at 20:53

loicb

587
2
6
24

The scroll event is an interesting idea ... I'll play around with it. Thank you. – Kenneth Ahlstrom Feb 27 '13 at 00:18

score 0 · Answer 3 · answered Feb 26 '13 at 20:53

0

Have you tryied event delegation?

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

answered Feb 26 '13 at 20:53

martriay

5,632
3
29
39

score 0 · Answer 4 · answered Feb 26 '13 at 20:57

0

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.

answered Feb 26 '13 at 20:57

benams

4,308
9
32
74

jQuery run function on element loaded via AJAX

4 Answers4