我怎么取消绑定这块的jQuery？ [英] How do I unbind this piece of jquery?

问题描述

我的Shopify存储使用Ajax调用的产品添加至购物车和jQuery更新前端。我最近安装无限AJAX滚动但是这带来了一些问题。

My Shopify store uses Ajax call's to add products to the cart and jQuery to update the front-end. I recently installed infinite-ajax-scroll but this brought some issues.

当向下滚动通过无限的ajax滚动加载的产品，然后单击添加到购物车按钮，Ajax调用和放大器; jQuery的更新不工作了，它重定向我的购物车页面。

When scrolling down to the products loaded by infinite-ajax-scroll, and then click on the add to cart button, the ajax calls & jQuery updates don't work anymore, it redirects me to the cart page.

我通过reinitialising那块jQuery的code解决这一点，ajaxifies用无限的ajax滚动的的 渲染 事件。

I solved this by reinitialising the piece of jQuery code that "ajaxifies" the shop using infinite-ajax-scroll's rendered event.

但现在向下滚动通过无限的ajax滚动加载了20个新产品的时候，ajaxifyShopify获得的第二次在第20个产品进行初始化。当添加的第一个20个产品之一的车，他们得到增加两倍。

But now when scrolling down to the 20 new products loaded by infinite-ajax-scroll, ajaxifyShopify get's initialized for the second time on the first 20 products. When adding one of the first 20 products to the cart, they get added twice.

我试图解除绑定的第一个 ajaxifyShopify 与jQuery的 .off（） ，但它不能正常工作。

I tried unbinding the first ajaxifyShopify with jQuery's .off() but it doesn't work.

完整的$ C $下 ajaxifyShopify 可以在线261的此处。每一个新的页面加载， ajaxifyShopify 获取真实初始化时间ajaxify的页面。

The complete code for ajaxifyShopify can be found on line 261 here. Every time a new page loads, ajaxifyShopify get's initialized to "ajaxify" the page.

下面是我的code：

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');
  });
})

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

You can take a look at the page in question here.

我是什么做错了吗？

推荐答案

我通过解除绑定按 ajaxifyShopify 绑定每个单独的事件处理程序解决了这一点。

I solved this by unbinding each individual event handler binded by ajaxifyShopify.

对于那些有兴趣，这里的code：

For those interested, here's the code:

<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>

这篇关于我怎么取消绑定这块的jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！