每次提交表单时，ajax调用的数量都会增加答案

【问题标题】：Number of ajax call increases every time submission of the form每次提交表单时，ajax调用的数量都会增加
【发布时间】：2014-11-14 07:15:59
【问题描述】：

我正在使用下面的代码使用 ajax 提交我的表单。

首先：第一次，ajax 不调用，然后我必须再次单击它。第二次点击后，调用ajax..

第二：每次提交，ajax调用次数都会增加。

例如，如果我第一次提交它，它将被调用一次。然后，如果我第二次单击它，它会调用它两次。以此类推3次，就叫它3次……

下面是我的代码。请帮帮我。我是 jQuery 的初学者。

我在表单提交时使用了引导验证。

$("#subscriptionform").validate(
  {
    rules: 
    {
      subemail: 
      {
        required: true,
        email: true
      }
    },
    submitHandler: function (form) 
    {//alert("dfd");
      $('#subscribeBtn').on('click', function () {
         var $btn = $(this);
        $btn.button('loading');
        //alert("dfadsfs");        
        
        
          $.ajax({
            type: $(form).attr('method'),
            url: BASEURL+"contactus/subscribe",
            data: $(form).serialize(),
            success: function (status) 
              {
                $('#subinputid').val('');
                if(status==1)
                {
                  alert("You have subscribed successfully.");
                }
                else
                {
                  alert("You have alerady subscribed.");
                }
                console.log(status);
                //alert(status);
                return false;
              } 
          });
        setTimeout(function () {
                $btn.button('reset');
            }, 1000);
      });
    }
  });

<form method="post" id="subscriptionform" name="subscriptionform" action="<?= BASEURL.'contactus/subscribe' ?>">
             <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 padding0 text-right">
               <div class="newsletter-label">
                NEWSLETTER
               </div>
               <div>
                <input class="email-input" id="subinputid" name="subemail" type="text" placeholder="ENTER YOUR EMAIL" >
               </div>
             </div>
              <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 padding0">
                <button id="subscribeBtn" data-loading-text="Subscribing..." autocomplete="off" class="btn-subscrib" type="submit" name="subscribe" value="SUBSCRIBE">SUBSCRIBE</button>
              </div>
          </form>

【问题讨论】：

这是因为您将 AJAX 调用绑定到订阅按钮，但是每当进行验证尝试时，您都会创建一个新的单击事件触发器。因此，随着验证次数的增加（由表单提交触发），您将越来越多的点击处理程序绑定到按钮，从而导致 AJAX 调用重复。
那么现在，我应该把click函数和ajax调用分开吗？
你可能想改变你的逻辑。您当前的逻辑是验证表单-> 如果有效，则绑定单击处理程序。怎么样，将验证绑定到单击处理程序，然后如果有效则提交表单？（即反过来）

标签： javascript php ajax forms twitter-bootstrap

【解决方案1】：

将 unbind 放在下面的行之前：

$('#subscribeBtn').unbind('click');
$('#subscribeBtn').on('click', function () {
     var $btn = $(this);

在这里可以正常工作，为什么在调用验证时会发生这种情况，点击一次又一次绑定，所以取消绑定点击事件并再次绑定事件。

【讨论】：

非常感谢。它现在工作:) Ajax 召回现在没有发生。但正如我所描述的，第一次，按钮是不可点击的。你能帮我解决这个问题吗，我已经厌倦了找到解决方案。
你现在正面临什么？第一次点击有效，然后按钮未启用？
不，第一次，ajax不调用，然后我必须再次单击它。第二次点击后，调用ajax。
你修复了吗？为什么要设置 setTimeout 函数？你能评论一下吗？
不，我仍然被困在那个问题上。该超时用于 ajax 调用竞争。如果我评论它然后加载继续，为了使该按钮再次工作，我必须重新加载页面。