button onclick function firing twice

Question

I have a button that calls a javascript function using an event handler. For some reason, the event handler is being called twice.

Here is my button (I am using a php object to generate the code, that's why there are a lot of empty tags):

<button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true" width="" height="" placeholder="" data-mini="1" onkeypress="" >Add To Cart</button>

Here is my event handler:

$('.addToCartButton').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

Here, I am getting the alert twice.

I have tried calling the function addToCart in the button's onclick property, but if I try it that way, I get this error:

TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')

I have also tried event.preventDefault() and event.stopPropagation(), and neither worked.

Any ideas why this is happening, or what I can do to stop it from executing twice, or maybe why I am getting an error if I call the javascript function from onclick=""?

Answer 1

Maybe you are attaching the event twice on the same button. What you could do is unbind any previously set click events like this:

$('.addToCartButton').unbind('click').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

This works for all attached events (mouseover, mouseout, click, ...)

Answer 2

My event was firing twice because I accidentally included both my_scripts.js AND my_scripts.min.js. Ensure you only include one.

Answer 3

Unbind event from selector and after appending in element in DOM again trigger event on specific selector.. $("selector_name").unbind( "event" ); //After this call event on selector again..

For example:

$( "#button" ).unbind( "click" );

$("#button").click(function(event) {
console.log("button click again);
});

Answer 4

Just for the record in case someone else's having the same problem, I had the same issue, the root cause was that there were 3 buttons with the same ID, after clicking one, the other two also fired their OnClick events...

Answer 5

For me, I found out my events were not bound to my mapped component. The relevant answer is at Why is my onClick being called on render? - React.js but to provide some insights I've copied some of the answer below (Hope this helps!):

1. using .bind

activatePlaylist.bind(this, playlist.playlist_id)

2. using arrow function

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3. or return function from activatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}

Answer 6

You probably want to pass in the event and add

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
});

OR

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
  return false;
});

Answer 7

I had the same issue with my MVC project, and the problem was that I had included site.js twice; once in the _Layout.cshtml file and once in the Scripts section of the main cshtml file. Removing one solved the problem.

Answer 8

For this type of error:

• It may be that you have duplicate events bound
• Either the event handler could be hooked up twice, or maybe the event isn't being unbound, after the intended listener(s) have finished listening and have done their job.

In this case, you need to do something to unbind the listener once you no longer need to listen.

Answer 9

I came here looking for answers. It turned out that mine wasn't exactly firing twice. It would fire, then when I later clicked something else, it would also fire for that click.

I had a container div with a click listener on it. Inside that div, a clickable link.

Clicking the link also fired the container's click event.

I spent some time with unbind('click') / rebind experiments but nothing was satisfactory. In the end I simply put a condition in the container click event so that it only ran if the click target wasn't an anchor: -

    if (e.target.tagName !== 'A') {    
        alert("bob");
        //addToCart($(this).attr("id"));
    });