如何解除这段jquery的绑定

Question

My Shopify商店使用Ajax调用将产品添加到购物车中，并使用jQuery更新前端。我最近安装了无限ajax滚动，但这带来了一些问题。

当向下滚动到无限ajax滚动加载的产品，然后单击添加到购物车按钮时，ajax调用&jQuery更新不再有效，它将我重定向到购物车页面。

我通过重新初始化jQuery代码来解决这个问题，该代码使用无限ajax滚动的rendered事件"ajaxizes"商店。

但现在，当向下滚动到无限ajax滚动加载的20个新产品时，ajaxifyShopify在前20个产品上进行了第二次初始化。当将前20种产品中的一种添加到购物车时，它们会被添加两次。

我尝试将第一个ajaxifyShopify与jQuery的.off()解除绑定，但不起作用。

ajaxifyShopify的完整代码可以在这里的第261行找到。每次加载新页面时，ajaxifyShopify get都会被初始化为"ajaxify"页面。

这是我的代码：

jQuery(function($) {
  ajaxifyShopify.init({
    method: '{{ settings.ajax_cart_method }}',
    wrapperClass: 'wrapper',
    formSelector: '#addToCartForm',
    addToCartSelector: '#addToCart',
    cartCountSelector: '#cartCount',
    toggleCartButton: '.cart-toggle',
    useCartTemplate: true,
    btnClass: 'btn',
    moneyFormat: {{ shop.money_format | json }},
    disableAjaxCart: false,
    enableQtySelectors: true
  });
});
console.log('ajaxifyShopify initialized for the first time');
var ias = jQuery.ias({
  container:  '#products',
  item:       '.single-product',
  pagination: '.pagination-custom',
  next:       '.next'
});
ias.extension(new IASSpinnerExtension({
  src: '{{ "spiffygif_36x36.gif" | asset_url }}'
}));
ias.on('rendered', function(data, items) {
  console.log('ias rendered');
  // Unbind ajaxifyShopify
  $("html").off("ajaxifyShopify");
  console.log('ajaxifyShopify off');
  // Initialize ajaxifyShopify
  jQuery(function($) {
    ajaxifyShopify.init({
      method: '{{ settings.ajax_cart_method }}',
      wrapperClass: 'wrapper',
      formSelector: '#addToCartForm',
      addToCartSelector: '#addToCart',
      cartCountSelector: '#cartCount',
      toggleCartButton: '.cart-toggle',
      useCartTemplate: true,
      btnClass: 'btn',
      moneyFormat: {{ shop.money_format | json }},
      disableAjaxCart: false,
      enableQtySelectors: true
    });
    console.log('ajaxifyShopify initialized from ias');
  });
})

您可以在此处查看有问题的页面。

我做错了什么？

Answer 1

我通过解除绑定ajaxifyShopify绑定的每个单独的事件处理程序来解决这个问题。

对于那些感兴趣的人，这里有代码：

<script>
  jQuery(function($) {
    ajaxifyShopify.init({
      method: '{{ settings.ajax_cart_method }}',
      wrapperClass: 'wrapper',
      formSelector: '#addToCartForm',
      addToCartSelector: '#addToCart',
      cartCountSelector: '#cartCount',
      toggleCartButton: '.cart-toggle',
      useCartTemplate: true,
      btnClass: 'btn',
      moneyFormat: {{ shop.money_format | json }},
      disableAjaxCart: false,
      enableQtySelectors: true
    });
  });
  console.log('ajaxifyShopify initialized for the first time');
  var ias = jQuery.ias({
    container:  '#products',
    item:       '.single-product',
    pagination: '.pagination-custom',
    next:       '.next'
  });
  ias.extension(new IASSpinnerExtension({
    src: '{{ "spiffygif_36x36.gif" | asset_url }}'
  }));
  ias.on('rendered', function(data, items) {
    console.log('ias rendered event');
    // Unbind previous ajaxifyShopify event handlers
    $("wrapper").off();
    $("#addToCartForm").off();
    $("#addToCart").off();
    $("#cartCount").off();
    $(".cart-toggle").off();
    console.log('ajaxifyShopify off from ias rendered event');
    // Initialize ajaxifyShopify
    jQuery(function($) {
        ajaxifyShopify.init({
          method: '{{ settings.ajax_cart_method }}',
          wrapperClass: 'wrapper',
          formSelector: '#addToCartForm',
          addToCartSelector: '#addToCart',
          cartCountSelector: '#cartCount',
          toggleCartButton: '.cart-toggle',
          useCartTemplate: true,
          btnClass: 'btn',
          moneyFormat: {{ shop.money_format | json }},
          disableAjaxCart: false,
          enableQtySelectors: true
        });
      console.log('ajaxifyShopify initialized from ias rendered event');
    });
  })
  </script>