[How To] Prevent Multiples Clicks in JQuery

Recently, I was working in JQuery and faced a problem. This was the second time I faced this problem. Problem is Click event in JQuery gets triggered multiple times. The workaround that I found was to unbind the click event from the event handler, before each call to the click event.

Here is an example. This code snippet is the same that invoked the multiple click event problem. I am not going to describe it in details.

$('div.comments').unbind(); //Unbind the click event
$('div.comments').click(function(e) {
   var name=$(this).attr('class');
   var id = name.split(" ");
   var actionname = "";

   $('.options img').unbind(); //Unbind the click event.
   $('.options img').click(function(event) {
         actionname = $(this).attr('rel');
	 var details = actionname.split(" ");
   	 alert("Action : "+details[0]+" id : "+details[1]);
	});
	$("div#ajax-success-messages").html("The ID of the Div is : "+id[1]).css("visibility","visible");
    });

I took me around 2 hours to fix this problem, when I encountered it for the first time. Happy Coding.

Leave a Reply

Your email address will not be published. Required fields are marked *