I hope this is not too difficult to figure out and I'm just being an idiot. I've got a section of my web app loading via AJAX with some navigation within the element. However, every time the user reloads the page it increases the number of times all my bound JQuery functions are run! This is an issue both for performance and because some of my functions use a .toggle() method so it only works if the function is called an odd number of times.
I don't understand why setting the click event multiple times would cause this effect. Maybe it has something to do with how often the buttons themselves are rendered but I don't understand that since the contents of the
* FUNCTION FOR REVEALING AND LOADING OR HIDING THE FORM FOR ASSIGNING PREDEFINED
* SOURCES TO SURVEY PRODUCTS.
console.log('myDelSource called to assign function to #delSource buttons');
var source_id = this.id;
console.log('ID passed to DelYes button: ' + source_id);
function inlineAJAX ()
console.log('inline AJAX called');
var em = $(tag).find('div');
var emTag= '#' + em.attr('id');
console.log("delYes function called, the following url was passed: " + url);
console.log('delYes action triggered');
This answer is based on a sort of defensive coding approach. If your user is really reloading the page, the problem absolutely should not occur, as you suggest. But let's assume that somehow redundant event handlers are getting set up due to circumstances beyond your control.
In your situation one practical way to approach it would seem to be to have your handler setup functions remove old handlers before setting up the new ones. In jQuery you can do this with code like
or similar. The documentation page http://api.jquery.com/off/ discusses various options that remove handlers more or less selectively. You might even choose to do just:
Code of this sort could appear at the beginning of each of your setup functions.