javascript - AJAX 页面转换后 Woocommerce 功能被禁止

Question

我有一个ajax转换，如下:

function fadeTransition(href = window.location.href) {

  $('.fader').css({
    'position': 'fixed',
    //        'height': h,
    'height': '100vh',
    'width': '0',
    'left': '0',
    'top': '0',
    'color': 'black',
    'background-color': 'black',
    'z-index': '300'
  }).animate({
    'width': '100vw',
  }, 400, function() {
    $('.slider-transition').load(href + ' .slider-transition', function() {
      //            EXECUTES ON CALLBACK
      // $('.slider-transition').children('.slider-transition').unwrap();
      //            h = $(document).height();
      $('.fader').animate({
        'left': '100vw'
      }, 400, function() {
        slideShowInit();
        initParalax();
        $('.woocommerce-product-gallery').each(function() {
          $(this).wc_product_gallery();
        });
        $('.slider-transition').children('.slider-transition').unwrap();
        // $('.slider-transition').parents('.slider-transition').unwrap();
      });
    });
  });
}

这是一个简单的转换，将元素从下一页加载到当前页面的元素中，并将所有单击事件附加到正文，如下所示:

$('body').on('click', '.main-menu li a, nav a, a.button, a.square, a.grow', function(event) {
  event.preventDefault();
  event.stopPropagation();
});
$("li").on("click", "a", function(event) {
  var _href = $(this).attr("href");
  history.pushState(null, null, _href);
  fadeTransition(_href);
});

我已经能够解决转换后点击事件被破坏的问题。唯一的问题是，使用 WordPress 中的 Woocommerce 插件，我不可能希望遍历 JS 的整个 Assets 文件夹并替换

$('.a').on('click', function() {});

与

$('.body').on('click', 'a', function() {});

并将所有 DOM 事件附加到主体上，就像这样，即使如此，我也只有 70% 确定这是问题所在，有人知道解决这个问题的方法吗？

Answer 1

使用 off() 删除带有 jQ​​uery 的事件处理程序

使用 jQuery 停止/删除干扰您自己的自定义单击事件的现有“单击”委托(delegate)事件，您可以尝试使用 off() ，这可能与 on() 相反。

所以你的代码应该是:

jQuery(function($){
    $(document.body).off('click', 'a');

    $("li").on("click", "a", function(event) {
        var _href = $(this).attr("href");
        history.pushState(null, null, _href);
        fadeTransition(_href);
    });
});

它可以解决您的问题。