jQuery click event on button firing multiple times?

Question

It's been a long time since I used jQuery, so I'm a bit rusty. Having an issue with a click event on a simple button. (I've tried going through every suggested question that seems like a similar issue. The solutions there don't seem to fix this.) This is a form to change the year for output in a table (data retrieved via ajax, so no page refresh). The user will need to be able to change the year and submit the form multiple times.

<form id="toolbar-year-form">
    <input type="text" name="target-year">
    <button>Go</button>
</form>

$(document).ready(function() {

    $('#toolbar-year-form > button').off().on('click', function() {
        $('#toolbar-year-form').submit(function(e) {
            e.preventDefault();
            e.stopPropagation();
            alert("submitted");
        });
    });

});

If I fill in the input and click the button, it works as expected. If I click it again without a page refresh, the event will then fire twice. If I click again, it fires three times. And so on...

The click event is being bound again each time I click, which explains the multiplication of firing, but I don't know why it's being bound again. :-)

What am I missing?

No need to `$('#toolbar-year-form > button').off().on('click', function() {` you can use `submit` event only .. submit event will catch the button click itself — Mohamed-Yousef, Jan 22 '20 at 15:41
Turns out using `$('#toolbar-year-form > button').one('click'...` did the trick. — Mattaton, Jan 22 '20 at 15:44
Its not a trick while no need to use the submit inside the click .. It's enough to use the submit event without the click one — Mohamed-Yousef, Jan 22 '20 at 15:46
Won't the `.submit` in the document.ready just submit the form as soon as the page loads? — Mattaton, Jan 22 '20 at 15:49
jQuery's submit function registers an event handler for the submit event the way you've used it. It triggers a submit event if you don't give it arguments. https://api.jquery.com/submit/ — Patrick Stephansen, Jan 22 '20 at 15:52

score 1 · Accepted Answer · answered Jan 22 '20 at 15:48

1

If a button is not given a type attribute, it defaults to a submit button. You're binding a(nother) handler for form submission when the button is clicked, which is then immediately triggered by the button click because it's a submit button that is a child of the form. You can get the behaviour I believe you want by removing the outer event binding since clicking the button already submits the form:

$(document).ready(function() {
     $('#toolbar-year-form').submit(function(e) {
        e.preventDefault();
        e.stopPropagation();
        alert("submitted");
    });
});

answered Jan 22 '20 at 15:48

Patrick Stephansen

773
9
20

This is what @Mohamed-Yousef was saying, too. I thought the `.submit` in the `.ready` would just submit the form on page load. – Mattaton Jan 22 '20 at 15:52
Apparently, `.submit` does not do what I thought it did! Thanks! – Mattaton Jan 22 '20 at 15:53
1

`.submit()` does emit the submit event when not given any arguments, which is pretty confusing. Consider using the more explicit `.on( "submit", handler )` instead. – Patrick Stephansen Jan 22 '20 at 15:58

jQuery click event on button firing multiple times?

1 Answers1