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 :)

Yes, that's the problem and you should use delegated event handlers. — The Alpha, Commented Sep 14, 2013 at 23:13
I'm not sure how to troubleshoot this, like I said I'm not getting any error messages so how can I even start? — docodemore, Commented Sep 15, 2013 at 1:01
The event handlers should be delegated, like, $(document).on('click', '.someElement', function(){...}). — The Alpha, Commented Sep 15, 2013 at 1:02
Ok I get it, I have to use jquery.on instead, looks like I have to change a bunch of functions, even the GD Star rating functions, when I edit GD Star plugin I'll just use git and make my own version, version control ftw. thanks Sheikh :) — docodemore, Commented Sep 15, 2013 at 1:16

The Alpha · Accepted Answer · 2013-09-15 01:25:31Z

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.

edited Sep 15, 2013 at 1:25

answered Sep 15, 2013 at 1:20

The Alpha

146k29 gold badges293 silver badges311 bronze badges

Add a comment |

Collectives™ on Stack Overflow

other Ajax scripts hang when using wordpress jetpack infinite scroll

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related