javascript - 函数在 jQuery 中运行多次

Question

我创建了一个函数，它向 PHP 文件发出 ajax 请求，然后将产品添加到购物车。此函数在第一次单击时正常工作，但在每次后续单击时它会再次运行该函数。因此，例如，在第 2 次单击时它运行函数两次，在第 3 次单击时它运行它 3 次等等......当页面刷新时问题被重置......

点击代码如下:

    $("#add_123456").click(function () {  
      $("#add_123456").addClass('added');          
      var quantity = $("#qty_123456").val();
      $('#basket_1').submit(function (event) {
        event.preventDefault();
        basket_add("feqf73nbdw7","123456","XYZ123","1","0.1","19.23");            
      });      
    });

函数如下:

    function basket_add(cartID, productID, code, quantity, weight, price) {  
      var item_add = {"Cart_ID": cartID, 
                      "Product_ID" : productID,
                      "Code" : code,
                      "Qty" : quantity,
                      "Weight" : weight,
                      "Price" : price
                      };            
      $("#basketpop").animate({top: "40px"}, 200);    
      $.ajax({
        url:  '/templates/new/includes/ajax/add_to_basket.php',
        type: 'POST',
        data: item_add,
        dataType: "html",
        success: function(html){
          $('.basket_content').empty().append(html);
          $('.basket_content').css("height", "auto");
          var item_add = null;
        }
      });
      return false;          
    };

不要认为问题出在被调用的 PHP 文件上。

干杯

Answer 1

假设 #add_123456 按钮是一个 submit 按钮，问题是因为您要向表单添加一个新的 submit() 处理程序每次点击按钮。相反，您只需要添加一次提交处理程序并在单击按钮时在表单上引发事件。试试这个:

$('#basket_1').submit(function (event) {
    event.preventDefault();
    basket_add("feqf73nbdw7","123456","XYZ123","1","0.1","19.23");            
});  

$("#add_123456").click(function () {  
    $("#add_123456").addClass('added');          
    var quantity = $("#qty_123456").val();
    $('#basket_1').submit();
});

如果您只是通过 AJAX 提交，则完全不需要提交表单，如下所示:

$("#add_123456").click(function () {  
    $("#add_123456").addClass('added');          
    var quantity = $("#qty_123456").val();
    basket_add("feqf73nbdw7","123456","XYZ123","1","0.1","19.23");            
});