javascript - jQuery:仅在单击提交按钮后自动提交表单

Question

我有一个常规表单，当单击提交按钮时我想隐藏提交按钮，如果提交后任何表单值发生变化，它将再次自动提交。

我使用下面的代码并且它有效，但是每次我更新表单数据并且表单自动提交时，在JS控制台中我可以看到它被提交了很多次，并且每次提交的数量都会增加自动提交。例如第一个自动提交发布了一次，第二个自动提交发布了 4 次，第三个自动提交发布了 8 次，然后表单开始变得非常慢。

jQuery(function($) {

$(document).on("click",'#bookingbutton', function() {
    $( "#bookingbutton" ).css( "display", "none" );
    $( ".bookroom1" ).addClass( "bookroom1-submit" );

    $(".bookroom1-submit").change(function() {
        $("#bookingbutton").click();
    });

});

});

Answer 1

这是因为每次调用 $("#bookingbutton").click() 时，您都会在 .bookroom1-submit 中再次注册一个 change 监听器。

尝试更换

$(".bookroom1-submit").change(function() {
    $("#bookingbutton").click();
});

与

$(".bookroom1-submit").off('change').on('change', function() {
    $("#bookingbutton").click();
});

应该可以了。

编辑

对该问题的一些进一步解释:

1. 已点击“提交”按钮。
2. 它向按钮添加一个类并注册一个 change 监听器。
3. 下次，当输入更改时，您将触发按钮单击，这将导致 1. 和 2. 再次发生。现在您将有 2 个用于 change 的监听器。
4. 它将继续呈指数级增长。

另一种选择是，使用 $("#your-form-id").trigger('submit') 代替 $("#bookingbutton").click(); ;