Question

自从我使用jQuery已经很长时间了，所以我有点生锈。简单按钮上的click事件有问题。（我尝试过解决所有类似问题的建议问题。那里的解决方案似乎无法解决此问题。）这是一种更改表中输出年份的形式（通过ajax检索数据，因此不刷新页面）。用户将需要能够更改年份并多次提交表单。

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

});

如果我填写输入并单击按钮，则它会按预期工作。如果我在没有页面刷新的情况下再次单击它，则该事件将触发两次。如果我再次单击，它将触发三遍。等等...

每次单击都会再次绑定click事件，这解释了触发的多重性，但我不知道为什么再次绑定它。：-）

我想念什么？

Answer 1

如果没有为按钮提供type属性，则默认为submit按钮。单击按钮时，您将绑定（另一个）处理程序以提交表单，然后单击按钮立即触发该按钮，因为它是表单的子级submit按钮。您可以通过删除外部事件绑定来获得我认为想要的行为，因为单击该按钮已经提交了表单：

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

jQuery触发按钮多次触发事件？

1 个答案: