jquery double execution of single click

Question

Hi I have a jquery function that goes like this

$(".btn").click(function(e){
 alert("hello"); 
});

For some reason it gives two alerts. This stems from another script in a plugin I am using (found out as I turned the plugin off). In my script, I tried to unbind it, which gives me no fix. I have also used e.stopPropogation() which works, but then kills the plugin function. Is there a way to allow the plugin function to run its course, then for my function to perform once only.

Thanks in advance.

You can do this by using a namespace to the click event of your plugin thereby triggering the click on the plugin's components over a different namespace and performing the click event mentioned above over a different namespace preventing any clashes. — Rohan
– Rohan, Commented Jan 6, 2014 at 23:47
Can you post more information such as your html code, the plugins you are using. — Marko
– Marko, Commented Jan 6, 2014 at 23:49
I have a jsfiddle here jsfiddle.net/ArY5c/2 with the plugin, when you click on a button the first time, it gives two alerts, then runs fine. At Rohan Reddy, I have been reading up on the namespace, not quite sure on how it works, could you point me in the right direction, pls — Ant
– Ant, Commented Jan 7, 2014 at 0:07

Jarvan · Accepted Answer · 2014-01-07 02:20:52Z

1

I have checked your fiddle and i find this trouble was cause by the div with data-uk-button-radio, the uikit.min.js bind a click event on divs with data-uk-button-radio which will trigger all click event of div's children.

So using event to judge if this click action comes from mouse or script will solve this.

Like this:

(function(){
 $( ".uk-button" ).click(function( event ) {
 if(event.originalEvent)//only event from mouse has this property 
  alert("hello"); 
  // Do something
});
})(jQuery)

fiddle here.

answered Jan 7, 2014 at 2:20

Jarvan

1,2609 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ant Over a year ago

Hi, thank you this seems to have solved the issue :), thank very much! Just another question regarding your answer. Would if(event.originalEvent) work for touches also, or would I need to add something like this if(event.orginalEvent && event.originalEvent.touches)

Jarvan Over a year ago

@Ant I don't know well about mobile jquery,but i think if(event.originalEvent) will work for touches also,if not,you can find a unique property of event in touches or script trigger by debug the two situations,there must have some properties can work.

james emanon · Accepted Answer · 2014-01-07 01:53:38Z

0

try this: based on your fiddle

$( ".uk-button" ).bind('click.uniqueEvent', function( event) {
    event.stopPropagation();


    alert("hello"); 
   // Do something
});

Then, when you want to unbind this particular event. you can just do:

unbind(".uniqueEvent")

answered Jan 7, 2014 at 1:53

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

1 Comment

Ant Over a year ago

Hi, I tried this, but it stops the plugin functions from working. Still trying to read up on namespace to see if there is something to fix it. Thanks for your suggestion.

Collectives™ on Stack Overflow

jquery double execution of single click

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related