[Resolved] JavaScript event handler issue using custom search

[Author]

Posts

[Saul Baizman]

Hi there,

My website has a listing of custom post types, Services, on a webpage with a custom search used to filter a taxonomy of Target Audiences:

1. All (default)
2. Organizations
3. Individuals

Each service has a link, "View Offerings," which expands a hidden element containing a grid of cards. jQuery is used to attach an event listener to the "View Offerings" element. Clicking the link works as expected when the page initially loads.

After clicking one of the filter options, such as "Organizations," clicking "View Offerings" no longer functions. Here is a screencast illustrating the issue:

hidden link

I believe the problem is caused by the AJAX content refresh of the custom search. When a filter link is clicked, new content appears, and the jQuery event handler has not attached itself to the new paragraph element. Is there a Toolset JavaScript or PHP filter, or JavaScript event, I can use to re-run my code to re-attach the listener to the "View Offerings" element?

Thank you.

Saul

[Minesh]

Hello. Thank you for contacting the Toolset support.

Toolset offers Ajax frontend events for the ajax view. Please check the following Doc:
- https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

You should try to add your desired Ajax event by clicking on the button "Frontend events".

[Saul Baizman]

Minesh,

Thanks for sharing this link, it's very helpful. I also found a solution independently, which involves attaching the event listener to the body element and using jQuery's on() method to specify the "child" (real) interactive element:

jQuery('body').on('click', '.element', function ( event ) { ... }

Thanks again!

Saul