如何绑定和解除绑定无限ajax滚动，以便其他jQuery正常工作

How do I bind and unbind infinite-ajax-scroll so other jQuery works?

本文关键字：绑定 jQuery 其他 常工作 工作 ajax 和解 何绑定 无限 滚动      更新时间：2023-09-26

注意：我知道这是一个常见的问题，已经写了很多关于它的文章，但我似乎无法解决它。

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

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

这是我用来激活IAS的内联脚本：

<script>
  var ias = jQuery.ias({
    container:  '#products',
    item:       '.single-product',
    pagination: '.pagination-custom',
    next:       '.next'
  });
  ias.extension(new IASSpinnerExtension({
    src: '{{ "spiffygif_36x36.gif" | asset_url }}'
  }));
</script>

这是负责将产品添加到购物车的代码（ajaxify.js行161-194）：

Shopify.addItemFromForm = function(form, callback, errorCallback) {
  // Unbind IAS
  ias.destroy();
  var params = {
    type: 'POST',
    url: '/cart/add.js',
    data: jQuery(form).serialize(),
    dataType: 'json',
    success: function(line_item) {
      if ((typeof callback) === 'function') {
        callback(line_item, form);
      }
      else {
        Shopify.onItemAdded(line_item, form);
      }
    },
    error: function(XMLHttpRequest, textStatus) {
      if ((typeof errorCallback) === 'function') {
        errorCallback(XMLHttpRequest, textStatus);
      }
      else {
        Shopify.onError(XMLHttpRequest, textStatus);
      }
    }
  };
  jQuery.ajax(params);
  var variant_id = params.data.split('=')[1]
  $( "#var-id-" + variant_id + " " + "#in-cart-indicator" ).removeClass( "not-in-cart" ).addClass( "triangle-top-right" );
  // Bind IAS
  ias.bind();
};

我在这个SO帖子的基础上添加了bind和unbind方法，但没有成功。

我做错了什么？

你可以在这里查看有问题的页面。

每当新产品使用无限ajax滚动的rendered事件完成渲染时，我都会重新初始化ajaxifyShopify，从而解决了这个问题。

在collection.liquid:中复制并粘贴以下代码

<script>
var ias = jQuery.ias({
  container:  '#products',
  item:       '.single-product',
  pagination: '.pagination-custom',
  next:       '.next'
});
ias.on('rendered', function() { 
  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
    });
  });
})
</script>
相关文章：