Shopify AJAXリクエスト - e.preventDefaultが機能しない

Question

私はAJAXリクエストを使ってカートの内容を示すカートポップアップを持っています。このポップアップの中に、その広告申込情報をカートから削除する「X」リンクがあります。ただし、次のコードを使用すると、Xリンクの通常のリンク動作が引き続き発生します。つまり、更新されたカートページにすぐに移動します。

$('#remove-from-cart').click(function(e) { 
     var link = $(this).attr('href'); 
     // Preven link normal behavior 
     e.preventDefault(); 
     $.ajax({ 
     url: link, 
     type:'GET', 
     success: function(data){ 
      $('#receipt-wrapper .receipt-row-2').html($(data).find('.line-item-container').html()); 
     } 
     }); 
    }); 

私が間違って何をやっている

<div class="grid__item receipt--hide small--one-sixth medium--one-sixth large--one-twelfth xlarge--one-twelfth icon-remove"> 
    <p class="cart__product-meta"> 
     <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" id="remove-from-cart"> 
      {% include 'svg-icon-remove' %} 
     </a> 
    </p> 
</div> 

"リンクを削除" のHTML？ （私は、JSコードの同じブロックを使用してポップアップを表示させ、そのために動作します）

ありがとう！

Answer 1

は、アンカータグからhrefを削除し、クリック機能にで使用します。、

Take a data attribute and add the required url in the data attribute.

<div class="grid__item receipt--hide small--one-sixth medium--one-sixth large--one-twelfth xlarge--one-twelfth icon-remove"> 
    <p class="cart__product-meta"> 
     <a id="remove-from-cart" data-url="/cart/change?line={{ forloop.index }}&amp;quantity=0"> 
      {% include 'svg-icon-remove' %} 
     </a> 
    </p> 
</div> 

を今、関数内でこれを使用してデータ属性を参照してください。

$('#remove-from-cart').click(function(e) { 
     var link = this.data("url") 
     // Preven link normal behavior 
     e.preventDefault(); 
     $.ajax({ 
     url: link, 
     type:'GET', 
     success: function(data){ 
      $('#receipt-wrapper .receipt-row-2').html($(data).find('.line-item-container').html()); 
     } 
     }); 
    });