Question

我正在研究ajax脚本，用户可以点击add_to_cart按钮在购物车上添加商品。但不幸的是，它会在单击时增加两次点击。

//here is my code
$(".add_to.cart").click(function(e){
  $(this).shoppingCart("add_item");
});

此脚本在单击时发送两个ajax请求。

如何阻止它？提前感谢您的帮助。

//here is my markup
<tr id='p_<?php echo $products['p_id']; ?>'>
   <td class='p-img'><img src='products.php?img=2323' /></td>
   <td class='p-name'><?php echo $products['p_name']; ?></td>
   <td class='p-price'><?php echo $products['p_price]; ?></td>
   <td><a href='javascript:void(0);' class='btn_primary add_to_cart'> Add To Cart</a></td>
</tr>

Answer 1

您可以设置一个标记.data()，检查它是否已被点击。

$('.add_to.cart').click(function(e){
    var el = $(this);

    if(el.data('hasAddedItem') === true)
        return;

    el.data('hasAddedItem', true).shoppingCart('add_item');
});

唯一可能的问题是，除非您将元素的hasAddedItem数据设置为false，否则您无法重新点击它。

Answer 2

尝试更改

$(".add_to.cart").click(function(e){

到

$(".add_to_cart").click(function(e){

因为这是按钮上的类：

class='btn_primary add_to_cart'

如何在jQuery中停止两次单击事件？

2 个答案: