button onclick function firing twice

Posted on

button onclick function firing twice – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and html. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about button onclick function firing twice.

Problem :

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() {

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=””?

Solution :

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() {

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

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

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);

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…

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 

You probably want to pass in the event and add

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this


$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  return false;

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.

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.

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') {    

My mistake was having a parent have the same class name as the child that i had attached the click event handler to. This caused me some confusion.

Leave a Reply

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