Question

我有一个购物车弹出窗口，使用AJAX请求显示购物车的内容。在这个弹出窗口中，我有一个＆＃34; X＆＃34;链接意味着从购物车中删除该订单项。但是，当我使用以下代码时，

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

X链接的正常链接行为仍然会发生，这意味着它会立即将您带到更新的购物车页面。

HTML＆＃34;删除链接＆＃34;

<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>

我做错了什么？（我使用相同的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>

现在，在函数中使用this来引用data属性。

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

Shopify AJAX请求 - e.preventDefault不起作用

1 个答案: