Shopify AJAX請求 - e.preventDefault不工作

Question

我有一個購物車彈出窗口，顯示使用AJAX請求購物車的內容。在此彈出框中，我有一個「X」鏈接，用於從購物車中刪除該訂單項。但是，當我使用以下代碼時，X鏈接的正常鏈接行爲仍然發生，這意味着它會立即將您帶到更新的購物車頁面。的 「刪除鏈接」

<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()); 
     } 
     }); 
    });