FacetWP breaks jQuery events

Question

I'm experiencing a problem almost identical to this one: my sorted results inside the .facetwp-template element contain a jQuery event (an email address that toggles on click) which works fine upon the first load of the results. When I click the second page of the results, it doesn't work anymore and the console log's empty, but it starts working again when I refresh the page.

I understand that this has something to do with the way FacetWP works with AJAX and refreshes the results without actually reloading the page, I've tried the workaround posted on the link above as the accepted answer, it works but looks really shoddy and in no way slick.

This is the workaround:

$('.facetwp-facet').click(function() {
      setTimeout(function() {
        location.reload();
      },500);
  });

As the original question was posted three years ago, I was wondering if anyone has since learned of a better way to fix this or should I try a different approach and maybe ditch the jQuery event to display email addresses. Not sure if it's relevant, but this is my code for said event:

$( ".email" ).click(function() {
 var $this = $(this);
 $this.parent().toggleClass('open');
});

Thanks for any help anyone could provide!

Answer 1

Okay, to answer my own question - I just had to rewrite the function and use .on(), as it listens to changes in the DOM. Like this:

$(document).on( 'click', '.email', function() {
  var $this = $(this);
  $this.parent().toggleClass('open');
});

Inspired by this piece of documentation: https://facetwp.com/use-jquery-on-instead-of-click/