FacetWP中断jQuery事件

Question

我遇到了一个与这个一几乎相同的问题:我在.facetwp-template元素中排序的结果包含一个jQuery事件(一个在单击时切换的电子邮件地址)，它在第一次加载结果时运行良好。当我单击结果的第二页时，它不再工作，控制台日志为空，但当我刷新页面时，它再次开始工作。

我知道这与FacetWP使用AJAX的方式有关，并且在没有实际重新加载页面的情况下刷新结果，我已经尝试了上面的链接上的变通方法，作为公认的答案，它可以工作，但是看起来很差劲，而且一点也不流畅。

这就是解决办法：

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

由于最初的问题是三年前发布的，我想知道是否有人从那以后学到了更好的方法来解决这个问题，或者我应该尝试一种不同的方法，或许放弃jQuery事件来显示电子邮件地址。不确定是否相关，但这是我针对上述事件的代码：

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

感谢任何人提供的任何帮助！

Answer 1

好的，为了回答我自己的问题，我只需要重写函数并使用.on()，因为它会监听DOM中的更改。如下所示：

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

受这篇文档的启发：https://facetwp.com/use-jquery-on-instead-of-click/