Skip Navigation

[Resolved] jQuery being inhibited by Ajax view page transition

This thread is resolved. Here is a description of the problem and solution.

Problem: I am using jQuery's click method to assign some click event handlers to elements in my View content, but after an AJAX pagination event the click handlers no longer work as expected.

Solution: Use jQuery's on method and attach the listener to document with a class-based limiter, instead of attaching 'click' listeners to some element that may or may not exist in the DOM after pagination.

Relevant Documentation:
https://api.jquery.com/on/

This support ticket is created 4 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by alexG-4 4 years, 6 months ago.

Assisted by: Christian Cox.

Author
Posts
#1660513

I am using jQuery to display a modal when visitors click on a More button on posts within an archive.

See hidden link

My problem is that the click on More isn't being triggered after an Ajax page transition, as this video shows
hidden link

I really like the ajax transition effect. Is there I way I can retain this and still implement my jQuery functionality?

Thanks

Alex

#1662175

Usually you can fix this by changing the click handler code that triggers the modal. Instead of something like this:

jQuery('.more').click(function(){ ...

You should place the click handler on the document object, and use the more class as a limiter:

jQuery(document).on('click', '.more', function(){ ...

Since the document isn't replaced or modified during the AJAX page transition, the click handler will continue to function. If this isn't working for you, I will need to know more about how the click handler is added in jQuery.

#1662347

Spot-on Christian!

I was hoping there'd be simple work-around.

Thanks.

My issue is resolved now.