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()时，您都会在change中再次注册.bookroom1-submit听众。

尝试替换

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

用

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

应该这样做。

修改

对该问题的进一步解释：

点击提交按钮。

它为按钮添加了一个类，并注册了一个change侦听器。

下次，当输入发生变化时，您将触发按钮上的单击，这将导致1.和2.再次发生。现在，您将有change的两个听众。

它将继续以指数方式增长。

另一种选择是，而不是$("#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();
          });

      });

  });

jQuery：仅在单击提交按钮后自动提交表单

2 个答案: