other Ajax scripts hang when using wordpress jetpack infinite scroll

Question

WordPress exchange brought me here:

Using Wordpress 3.6.1, latest Jetpack and latest jQuery as well

My website uses ajax to update post reviews and inline comments on pages of posts(archive, front page, etc) Infinite Scroll works, but when it loads the next page, the js for the newly loaded posts does not work. So the first page works, ajax loaded pages js scripts dont seem to be running. Getting no error messages.

I am thinking it has to do something with the objects loaded not being added to the DOM, but I am not sure how to troubleshoot this issue.

Any ideas? I'd like to avoid editing the ajax plugins and infinite scroll, but adding a hook or something in functions.php that would add the objects to the DOM, at least, if that's the problem. Thanks everyone, looking forward to help on this issue :)

Answer 1

You have several events, like

$('.default-add-comment-form').keypress(function (e){
    //....
});

Change all these event handlers ('click' etc) to

$(document).on('keypress', '.default-add-comment-form', function (e){
    //...
}

So, every events will fire properly even after new content loaded via ajax. Also, for plugins, you may initialize those again, in your success callback for new DOM elements (if required). Check jQuery on .