[英]How do I unbind this piece of jquery?
My Shopify store uses Ajax call's to add products to the cart and jQuery to update the front-end. 我的Shopify商店使用Ajax调用将产品添加到购物车,并使用jQuery更新前端。 I recently installed infinite-ajax-scroll but this brought some issues.
我最近安装了无限ajax-scroll,但这带来了一些问题。
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. 向下滚动到Infinite-ajax-scroll加载的产品,然后单击“添加到购物车”按钮时,ajax调用和jQuery更新不再起作用,它将我重定向到购物车页面。
I solved this by reinitialising the piece of jQuery code that "ajaxifies" the shop using infinite-ajax-scroll's rendered
event. 我通过使用无限ajax-scroll的
rendered
事件重新初始化可“使商店”邻接的jQuery代码片段来解决此问题。
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. 但是现在,当向下滚动到由infinite-ajax-scroll加载的20种新产品时,ajaxifyShopify get将在前20种产品中第二次初始化。 When adding one of the first 20 products to the cart, they get added twice.
将前20个产品之一添加到购物车时,它们会被添加两次。
I tried unbinding the first ajaxifyShopify
with jQuery's .off()
but it doesn't work. 我试图用jQuery的
ajaxifyShopify
.off()
解除第一个ajaxifyShopify
绑定,但是它不起作用。
The complete code for ajaxifyShopify
can be found on line 261 here . 可以在此处的第261行找到
ajaxifyShopify
的完整代码。 Every time a new page loads, ajaxifyShopify
get's initialized to "ajaxify" the page. 每次加载新页面时,
ajaxifyShopify
初始化ajaxifyShopify
get以“ ajaxify”页面。
Here's my 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 . 您可以在此处查看相关页面。
What am I doing wrong? 我究竟做错了什么?
I solved this by unbinding each individual event handler binded by ajaxifyShopify
. 我通过解除绑定由
ajaxifyShopify
绑定的每个事件处理程序来解决此问题。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.