RyanM RyanM - 2 months ago 8
Ajax Question

jQuery bound functions called for every time AJAX page loads

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

<div>
are being overwritten each time.

I don't know if this would matter but I'm using the Laravel 5.2 framework for this app.

Any assistance would be greatly appreciated. Thanks!


/**
* FUNCTION FOR REVEALING AND LOADING OR HIDING THE FORM FOR ASSIGNING PREDEFINED
* SOURCES TO SURVEY PRODUCTS.
*/
function myDelSource()
{
console.log('myDelSource called to assign function to #delSource buttons');
$("div.myoutput").on("click",".delSource",function(){
var source_id = this.id;
console.log('ID passed to DelYes button: ' + source_id);
$("#delYes").val(source_id);
});
}
function inlineAJAX ()
{
console.log('inline AJAX called');
$("body").on('click','.inlineAJAX',function(e){
e.preventDefault();
console.log('InlineAJAX triggered');
var tag=$(this).attr('tag');
var url=$(this).attr('url');
var em = $(tag).find('div');
var emTag= '#' + em.attr('id');
if (em.html().length<1)
{
loadComponent(url,emTag);
}
$(tag).toggle();
});

}
function delYes(url)
{
$("#delYes").attr('url',url);
console.log("delYes function called, the following url was passed: " + url);

$("body").on("click","#delYes",function(e){
e.preventDefault();
console.log('delYes action triggered');
var sps_id=$("#delYes").val();
deleteSPS(sps_id);
myurl=$("#delYes").attr('url');
loadComponent(myurl,"#surveys");
});
}
function b100()
{
$("body").on('click',".100",function(e){
e.preventDefault();
var mytag="#"+this.val();
$(mytag).val(100);
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(init);
function init()
{
myDelSource();
inlineAJAX();
b100();
delYes("/survey/{{$survey->id}}/products");
}
</script>




Answer

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

$(whatever).off('click','.inlineAJAX');

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:

$(whatever).off('click');

Code of this sort could appear at the beginning of each of your setup functions.

Comments