Why is the onClick event triggered twice?

Question

I have the following html:

<span onclick="alert('Boem')">
    <button id="test1">test</button>
</span>

When I call the following javascript:

$('#test1').trigger('click');

The onclick event is triggered twice, while I expect it to just trigger once. Because JQuery should look up in the DOM tree and find only one onclick.

I do not have control of the span, it is generated in a third party tool. I do have control over the button and his parameters.

You can find a JSFiddle example here: http://jsfiddle.net/Voga/v4100zke/

Update

I do not know the contents of the onclick listener of the span. This is also generated by the 3rd party tool. I want the click trigger to execute this onclick like it does now, but only once.

Answer 1

It is calling twice because button is inside a span and span has onclick="alert('Boem')", hence when you trigger click on button then it shows alert and same click event propagate to span and shows alert once again.

you need to stop default behaviour of button using below code :

$(function(){
$('#test1').click(function(e){e.preventDefault();}).click();
});

Demo

Answer 2

I was also getting a similar issue where I had to download a pdf which was downloading twice. I used jQuery's stopImmediatePropagation method.

$( "#test1" ).on("click", function(e) {
     e.stopImmediatePropagation();
});

$('#test1').trigger('click');

stopImmediatePropagation will prevent any parent handlers and also any other handlers from executing. Refer here for more details.

Answer 3

to stop event propagation use :stopPropagation

$( "#test1" ).on( "click", function(ev) {
    ev.stopPropagation();
});
$('#test1').trigger('click');

Please note, in order events are assigned in DOM.

DEMO

Answer 4

Bubbling. The click event on the child also happens on the parent (span).

Answer 5

This thread will help answer the 'why' of it.

A better way would be to just assign a click handler to the element so as to keep your Javascript abstracted out of the HTML:

http://jsfiddle.net/v4100zke/3/

$('#test1').click(function() {
    alert('Boem')
});

Hope that helps.

Answer 6

Here button click is triggered. Since the button is inside the span and onclick event is defined for span the two alert are happened.

One is by the button 

and

other by its parent(parent have onclick event and button click is triggered).

To avoid two alert, use this

<span>
    <button onclick="alert('Boem')" id="test1">test</button>
</span>

Answer 7

This should also work:

$($('#test1').parent()).trigger('click');

Answer 8

I had the same problem. Mine was the fact that I was using .trigger('.element') and there were two elements with that element class.

So, I got more specific, and used .trigger('.parent .element') to ensure only one click event happened on a single element, instead of one click event on two elements.

Answer 9

Note that you have used jQuery's click method, it will emit both dom's mouse click event and jquery's click event. Then both jquery's click Event and dom's mouse click event are propagated to the span element and its onclick listener is triggered twice hence it alert twice

check this demo to figure it out

as for how to deal with it, just use stopPropagation as answers above

$('#test1').click(function() {

  // comment this line and run, 'parent' will be alerted TWICE!!! since both mouseEvent and jQuery.Event trigger the onclick listener
  $('#children').click(function(e) {e.stopPropagation()})

});

Answer 10

I also face this problem on Modal

Solved by the following tricks -

$('#saveButton').off('click').on('click', { modal: modal }, save)

Here off('click') prevents the save method fires multiple times.

Answer 11

I have tried all the above given advice, but unfortunately non of the above works for me. "myBtn" is individual div in my case, so using flag and setTimeout I have achieved my desired result. Please advice.

I have tried :

1. .off()
2. .unbind()
3. e.stopImmediatePropagation()
4. e.preventDefault();

Below is the working code for me, I know its not a good practice, But for now I dont have any solution. Please advice

var isClicked = false;
$("#myBtn").on("click",function(e){
    
    
        if(!isClicked){
            isClicked = true;
            console.log("button clicked");
            

            setTimeout(function(){
                isClicked = false;
            },3000);
        }

})