WordPress博客-jQuery问题

Question

I have built a pretty simple WordPress blog however nearing the final stages I have run into a small problem that I cannot figure out for the life of me!

The site is http://lincsbusiness.co/, its running an ajax request so when you get the the bottom on the page its calls the next issues from the next page. Pretty simple.

However, if you follow these step you will be able to see the problem that I am talking about.

1. Refresh the home page
2. Expand the first issue, so you can see the sub headlines
3. Scroll to the bottom and till you get to issue 12
4. Try and expand that, and you will notice that the expansion bounces.

I am using the jQuery call back feature so after the AJAX request has finished it allows the jQuery to keep working.

And to stop having duplicate piece of jQuery for one before the event and one after, I have given the first four issue in the list unique identifiers, which are different to the one in the callback.

Here is the code I am using

jQuery(document.body).on('click', '.before-load', function(event) {
    jQuery(this).closest('.thepost').find('.thepost-entry').slideToggle('slow');
});

And I use another piece, which is identical but just uses the '.after-load' class, just so I can separate them.

If you can replicate the issue and see whats going on, and have a potential fix. that would seriously save me my sanity.

Thanks

Answer 1

I have a feeling this is because you are re-adding the listener for the click each time you expand the page, so probably every time you load more posts, the next post you click bounces +1 times.

I'd recommend stopping any other jQuery execution, removing the 'click' handler, then letting the ajax call expand the page...and then re-adding the 'click' handler to each post.