Function Running Multiple Times in jQuery

Question

I have created a function which makes an ajax request to a PHP file and then adds a product to the basket. This function works as it should on the first click, but on each subsequent click it runs the function again. So for example, on the 2nd click it runs the function twice, on the 3rd click it runs it three times and so on... The problem is reset when the page is refreshed...

Here's the on click code:

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

Here's the function:

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

Don't think the issue is with the PHP file that is being called.

Cheers

post your html code, and the html returned by the php page

Nelson Benítez León
– Nelson Benítez León

2012-10-09 08:32:40 +00:00
Commented Oct 9, 2012 at 8:32 — Nelson Benítez León
– Nelson Benítez León, Commented Oct 9, 2012 at 8:32

Rory McCrossan · Accepted Answer · 2012-10-09 08:42:45Z

4

Assuming the #add_123456 button is a submit button, the problem is because you are adding a new submit() handler to the form on each click of the button. Instead you only need to add the submit handler once and raise the event on the form on button click. Try this:

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

If you are only submitting via AJAX though, you can remove the need to submit the form at all, like this:

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

edited Oct 9, 2012 at 8:42

answered Oct 9, 2012 at 8:31

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Kilburn Over a year ago

hi thanks for your response, i've tried this and a different problem occurs, where the function is being run twice, every time

Daniel Kilburn Over a year ago

your second option unfortunately doesn't work, the page just refreshes

Rory McCrossan Over a year ago

@DanielKilburn You need to remove the form for the second option to work correctly, or make the submit button just a plain button or a link.

Marcus · Accepted Answer · 2012-10-09 08:33:29Z

2

Because every time you click the #add_123456, the code $('#basket_1').submit(function (event) {...}) will be run, which will add a callback function to $('#basket_1').submit, you may want to bind the callback first, and trigger submit when click.

Something like:

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

answered Oct 9, 2012 at 8:33

Marcus

6,8794 gold badges22 silver badges29 bronze badges

Comments

Stefano Ortisi · Accepted Answer · 2012-10-09 08:33:16Z

The issue could be created by the submit listener. A new one will be appended at every click. Maybe you should have separate your submit listerer doing something like that:

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

Another solution is to unbind your listener before binding:

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

Adder · Accepted Answer · 2012-10-09 08:36:54Z

0

You are attaching another event handler every time the button is clicked. Either attach the onsubmit handler outside of the onclick handler, or use

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

answered Oct 9, 2012 at 8:36

Adder

5,8982 gold badges35 silver badges60 bronze badges

Collectives™ on Stack Overflow

Function Running Multiple Times in jQuery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related