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. 它将继续呈指数级增长。

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

Answer 2

使用 jquery 关闭然后一个：

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

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

      });

  });