이 jquery 조각을 어떻게 바인딩 해제합니까?

Question

Shopify Store에서는 Ajax 호출을 사용하여 장바구니에 제품을 추가하고 jQuery를 사용하여 프런트 엔드를 업데이트합니다. 나는 최근에 infinite-ajax-scroll을 설치했으나 이것으로 몇 가지 문제가 발생했습니다.

infinite-ajax-scroll에서로드 한 제품으로 스크롤 한 다음 장바구니에 추가 단추를 클릭하면 ajax는 & jQuery 업데이트가 더 이상 작동하지 않으며 장바구니 페이지로 리디렉션됩니다.

무한 아약스 스크롤의 rendered 이벤트를 사용하여 상점을 "ajaxifies"하는 jQuery 코드 조각을 다시 초기화하여이 문제를 해결했습니다.

하지만 이제 infinite-ajax-scroll에 의해로드 된 20 개의 새로운 제품으로 스크롤하면 ajaxifyShopify get이 처음 20 개 제품에서 두 번째로 초기화됩니다. 처음 20 개 제품 중 하나를 장바구니에 추가하면 두 번 추가됩니다.

첫 번째 ajaxifyShopify의 바인딩을 jQuery의 .off()으로 시도했지만 작동하지 않습니다.

ajaxifyShopify에 대한 전체 코드는 261 here에서 찾을 수 있습니다. 새 페이지가로드 될 때마다 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'); 
    }); 
}) 

당신은 질문 here의 페이지에서 좀 걸릴 수 있습니다 :

여기 내 코드입니다.

내가 뭘 잘못하고 있니?

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>