Question

我创建了一个函数，它对PHP文件发出ajax请求，然后将产品添加到购物篮中。此功能在第一次单击时起作用，但在每次后续单击时，它再次运行该功能。因此，例如，在第二次单击时，它运行该功能两次，在第三次单击它运行三次，依此类推...当页面刷新时问题被重置...

这是点击代码：

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

Answer 2

因为每次单击#add_123456，代码$('#basket_1').submit(function (event) {...})都会运行，这将向$('#basket_1').submit添加回调函数，您可能希望先绑定回调，然后触发submit时的click。

类似的东西：

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

Answer 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");            
  });

另一个解决方案是在绑定之前取消绑定侦听器：

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

Answer 4

每次单击按钮时，您都要附加另一个事件处理程序。将onsubmit处理程序附加到onclick处理程序之外，或使用

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

函数在jQuery中运行多次

4 个答案: