时间戳

首页 > 解决方案 > 多次触发按钮时的jQuery单击事件？

jquery - 多次触发按钮时的jQuery单击事件？

问题描述

好久没用jQuery了，有点生疏了。一个简单按钮上的点击事件有问题。（我已经尝试过每一个似乎是类似问题的建议问题。那里的解决方案似乎无法解决这个问题。）这是一种更改表中输出年份的表格（通过 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");
        });
    });

});

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

每次单击时都会再次绑定单击事件，这解释了触发的乘法，但我不知道为什么它会再次被绑定。:-)

我错过了什么？

标签： jqueryonclick

解决方案

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

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

推荐阅读