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
– Mohamed-Yousef, Commented Jan 22, 2020 at 15:41
Turns out using $('#toolbar-year-form > button').one('click'... did the trick. — Mattaton
– Mattaton, Commented Jan 22, 2020 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
– Mohamed-Yousef, Commented Jan 22, 2020 at 15:46
Won't the .submit in the document.ready just submit the form as soon as the page loads? — Mattaton
– Mattaton, Commented Jan 22, 2020 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. api.jquery.com/submit — Patrick Stephansen
– Patrick Stephansen, Commented Jan 22, 2020 at 15:52

Patrick Stephansen · Accepted Answer · 2020-01-22 15:48:02Z

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, 2020 at 15:48

Patrick Stephansen

81810 silver badges21 bronze badges

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

3 Comments

Mattaton Over a year ago

This is what @Mohamed-Yousef was saying, too. I thought the .submit in the .ready would just submit the form on page load.

Mattaton Over a year ago

Apparently, .submit does not do what I thought it did! Thanks!

Patrick Stephansen Over a year ago

.submit() does emit the submit event when not given any arguments, which is pretty confusing. Consider using the more explicit .on( "submit", handler ) instead.

Collectives™ on Stack Overflow

jQuery click event on button firing multiple times?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related