JavaScript button click even is firing multiple times per click

Question

I have a JavaScript/jQuery application in which a Bootstrap Modal window is opened when any of the order cards in the image below are clicked on.

In the Modal HTML, I have a Start Timer Button

This timer button is added to the DOM after the DOM has already been loaded. SO I use this code below to attach a click event to the button after DOM loaded...

// Handle Timer Start Button click event
$(document).on('click', '.start-job-btn', function(e) {

    console.log('start timer');
    alert('start timer');

    e.preventDefault(); // prevents default
    return false;

});

HTML

<a href="#" data-order-id="5508" data-order-item-id="158" class="btn btn-primary start-job-btn">Start Job</a>

The Problem

When I click the start button I get my alert and console logger ran 3-6 times each button click!

I cannot figure out why this would happen as it doesn't happen in any other sections of the app. Just this button which has the code shown above.

It's hard to setup a demo app as the project is over 10k lines and would be hard to get it all up but based on this info does anyone have any ideas?

Show the code where you run the js in your snippet. Is that modal coming from ajax? — taxicala
– taxicala, Commented Sep 9, 2015 at 20:30
Are you running that code to bind the handler every time you add a button to the DOM? You should only run it once, when the DOM is first loaded. — Barmar
– Barmar, Commented Sep 9, 2015 at 20:30
@Barmar I just realized that each modal I open and click the button, it fires the event the number of modals I have opened on that page load. For example on my 3rd modal being opened, it will fire event 3 times. The way the app is structured, each column has it;s own codebase. I would be best to somehow terminate the click even when the modal is closed so when the next modal is opened, it will work correctly — JasonDavis
– JasonDavis, Commented Sep 9, 2015 at 20:33

Barmar · Accepted Answer · 2015-09-09 20:36:10Z

2

You're running the code every time you create a modal, so all the buttons are getting multiple click handlers -- one for each modal.

You should either take that code out of the code that creates modals, so you only run it once. Or you should change it so that it only binds to the buttons in that modal:

this_modal.on("click", ".start-job-btn", function() {
    ...
});

where this_modal is a reference to the current modal being created.

answered Sep 9, 2015 at 20:36

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

8 Comments

taxicala Over a year ago

what would happen if he opens the same modal more than once?

Barmar Over a year ago

This code should be run when creating the modal, not when opening it.

JasonDavis Over a year ago

I get what you're saying. I basically have an object for each of my board columsn but I also have a base object so I should try putting this into the base object. The modal open functionality is in the individual baord objects so this looks like a good idea thanks

taxicala Over a year ago

true. but OP did not show all the code. maybe he is using only one modal with dynamic content added to the body of it.

JasonDavis Over a year ago

For example I have a function that handles posting comments on all the modals and since all the modals have this feature it is in my base object. I think I can plug right in with this. This button is only on 1 of about 20 modals but I don't think that will cause any issue if the button element is missing on the other modals?

|

taxicala · Accepted Answer · 2015-09-09 20:38:05Z

1

As per your latest comment, i see two possible solutions here. first, put your previous code only in the page that will load the modals. There is no need to bind the event with every call. You will be binding a new function to the same event each time you open a modal.

And you mentioned jquery off method, that would also work:

$(document).off('click', '.start-job-btn');
$(document).on('click', '.start-job-btn', function(e) {
    console.log('start timer');
    alert('start timer');
    e.preventDefault(); // prevents default
    return false;
});

edited Sep 9, 2015 at 20:38

answered Sep 9, 2015 at 20:35

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

1 Comment

JasonDavis Over a year ago

Thanks for the help. I liked the off() method idea at first but I tested it and it just didnt work right for some reason so i'm gonna try Barmar's solution now

Collectives™ on Stack Overflow

JavaScript button click even is firing multiple times per click

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related