jQuery событие нажатия кнопки несколько раз?

Question

Прошло много времени с тех пор, как я использовал jQuery, поэтому я немного заржавел. Возникла проблема с событием нажатия на простую кнопку. (Я попытался просмотреть каждый предложенный вопрос, который кажется похожим вопросом. Решения там, похоже, не решают эту проблему.) Это форма для изменения года для вывода в таблицу (данные получены через ajax, поэтому нет страницы refre sh). Пользователь должен будет иметь возможность изменить год и отправить форму несколько раз.

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

});

Если я заполнил ввод и нажал кнопку, он работает как положено. Если я щелкну по нему снова без ссылки на страницу sh, событие будет запущено дважды. Если я нажму еще раз, он срабатывает три раза. И так далее ...

Событие щелчка снова связывается каждый раз, когда я нажимаю, что объясняет умножение стрельбы, но я не знаю, почему оно снова связывается. : -)

Чего мне не хватает?

Answer 1

Если кнопке не присвоен атрибут type, по умолчанию используется кнопка submit. Вы связываете (другой) обработчик для отправки формы при нажатии кнопки, которая затем немедленно вызывается нажатием кнопки, потому что это кнопка submit, которая является дочерней по отношению к форме. Вы можете получить поведение, которое, я полагаю, вам нужно, удалив внешнюю привязку события, поскольку нажатие кнопки уже отправляет форму:

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