When my event driven functions are called many repeat themselves.
Looking at debug I can see the functions being run more than once.
For instance the code below will produce:
First time: one original and one duplicate record added.
Second time: one original and two duplicate records added.
Third time: one original and three duplicate records added.
Fourth time: one original and four duplicate records added.

Now if I update a record it will go through the update six times.
And on and on.

$(function() {  
     $("#btn_add_this_card").click(function (e) {
         e.preventDefault();  
         $('#btn_add_this_card').fadeOut(300);   
         $.post("cards_insert.php", $("#input_form").serialize());
         reset();
         return;
        });
  });

 function reset()     
   {
     $("#div_form,  #div_cards, #cards_selected_category").hide();  
     $(".btn").hide();
     $( "#btn_add_card").show()
     $("#div_categories" ).load( "cards_get_categories.php" ); 
     return;  
   } ; 

Dani AI

Generated

Duplicate event calls almost always come from the same handler being attached more than once — commonly when bindings live in code that runs repeatedly (AJAX callbacks, fragment loads, or inside a function you call multiple times). describes the classic cumulative symptom; ’s hunch about re-wiring the handler was on point, and ’s question about extra wrappers is also relevant: any wrapper or loader that re-executes binding code will multiply handlers.

Practical fixes (pick one or more as appropriate):

  • Move bindings out of code that runs on every AJAX load; bind once when the page first initializes.
  • Use event delegation for elements that may be recreated:
    $(document).on('click', '#btn_add_this_card', function (e) { /* handler */ });
  • Use namespaced handlers and remove before re-binding:
    $('#btn_add_this_card').off('click.cards').on('click.cards', handler);
  • Use .one() if the action must run only once, or use a guard flag:
    if (!window.cardsBound) { /* bind handlers */ window.cardsBound = true; }

Debug checklist (fast): search the codebase for .click(, .on( or inline onclick; inspect loaded HTML for repeated <script> tags; open DevTools → Event Listeners to see how many listeners exist; add console.count('addCard called') or console.trace() inside the handler to discover where each call originates. Also set XHR/fetch breakpoints to catch re-load points that might re-run scripts.

Cautions: calling .off() without a namespace can remove other handlers you need; guarding variables must be global or reachable where you bind; avoid placing behavior scripts inside HTML fragments returned by .load() — return data only and keep behavior centralized. These patterns stop the cumulative effect and make future debugging far easier.

Recommended Answers

All 4 Replies

In your code above is line 2 being run multiple times? Are you wiring the even handler up again and again somehow? Difficult to say without seein the whole thing in context but that's what it sounds like to me.

Line 2 does not appear again.
There are 2 more handlers -- update and delete -- which fall prey to the same problem.
Here are the debug errors after I cleared the debug error stream and pressed the delete button once after I had just deleted 4-5 records. Each time it would add an extra trip through the cards_delete.php routine.
It just gets cumulative. There are no counters controling the javascript invokes either

POST http://127.0.0.1/cards/cards_delete.php

200 OK
        61ms    
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        108ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        110ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        135ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        109ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        159ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        197ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        194ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        188ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php
200 OK
        210ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php
200 OK
        241ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        248ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        245ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        287ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        293ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        298ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        302ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        331ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        339ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        378ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        368ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        368ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        392ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        399ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        396ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        421ms   
jquery-... > eval (line 4)
POST http://127.0.0.1/cards/cards_delete.php

200 OK
        409ms   
jquery-... > eval (line 4)
GET http://127.0.0.1/cards/cards_get_categories.php

200 OK
        430ms

whats with the extra function wrapper around your click handler

where/when/how are you calling it

Using console.trace I was able to detect a couple of javascript files stepping on each other.
Basically I was in doubt of what javascript was necessary in an AJAX called file vs in the calling file.
It is all fixed now and console.trace box will be in my tool.
Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.