Getting JS to work with AJAX-loaded post results

Anonymous

#213592

Hello,

We are using Search & Filter Pro with the AJAX reload functionality. For our page, the posts in the results each have a button that toggles to show more content using JS.

The problem is that when the AJAX reload happens, it creates new DOM elements so the event listener for the posts when the document first load doesn’t know about these newly created elements. Because of this, AJAX-loaded posts’ toggle buttons don’t work.

Is there a way to hook into when the AJAX finishes so our custom JS knows about these newly created DOM elements so the event listener works for them? Or is there some other solution you know about to make this functionality work?

Thank you for your help!

Anonymous

#213593

Nevermind. I figured it out on my own. For anyone else who might come across this problem, you can add a general event listener once the AJAX is completed using jQuery:

$( document ).ajaxComplete(function( event, xhr, settings ) {
                    //Code goes here
                });

Trevor

#213602

Our own event listener looks like this (you may want to use this):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
// so load your script here again
  });
}(jQuery));</script>

[Author]

Posts