title: How do I bind and unbind infinite-ajax-scroll so other jQuery works?
body: <p><strong>Note:</strong> I know this is a common issue and a lot has been written about this but I can't seem to fix it.</p>
  
  <p>My Shopify store uses Ajax call's to add products to the cart and jQuery to update the front-end. I recently installed <a href="https://github.com/webcreate/infinite-ajax-scroll" rel="nofollow noreferrer">infinite-ajax-scroll</a> but this brought some issues. </p>
  
  <p>When scrolling down to the products loaded by infinite-ajax-scroll, and then click on the add to cart button, the ajax calls &amp; jQuery updates don't work anymore, it redirects me to the cart page.</p>
  
  <p>Here's the inline script I'm using to activate IAS:</p>
  
  <pre><code>&lt;script&gt;
    var ias = jQuery.ias({
      container:  '#products',
      item:       '.single-product',
      pagination: '.pagination-custom',
      next:       '.next'
    });
  
    ias.extension(new IASSpinnerExtension({
      src: '{{ "spiffygif_36x36.gif" | asset_url }}'
    }));
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the code (<a href="http://cdn.shopify.com/s/files/1/0656/8697/t/7/assets/ajaxify.js?9064" rel="nofollow noreferrer">ajaxify.js</a> line 161 - 194) that's responsible for adding the product to the cart:</p>
  
  <pre><code>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();
  };
  </code></pre>
  
  <p>I've added the <a href="http://infiniteajaxscroll.com/docs/methods.html#bind" rel="nofollow noreferrer"><code>bind</code></a> and <a href="http://infiniteajaxscroll.com/docs/methods.html#unbind" rel="nofollow noreferrer"><code>unbind</code></a> method based on <a href="https://stackoverflow.com/questions/20404493/reset-disable-infinite-scroll-after-ajax-call">this SO post</a>, but without success.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>You can take a look at the page in question <a href="http://goo.gl/AMIgcP" rel="nofollow noreferrer">here</a>.</p>