[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.

Samundra Shrestha

I work as fullstack developer. Having spent more than 5 years in the web development technologies, I aspire to create an environment where we can share, learn and grow together.

Leave a Reply

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