Question

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

第一：ajax第一次没有打电话，然后我必须再次点击它。第二次单击后，然后调用ajax ..

第二：每次提交时，ajax呼叫的数量都会增加。

例如，如果我是第一次提交，它将被调用一次。然后，如果我第二次点击它，它会调用它两次。等3次，它叫它三次......

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

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

＆＃13;

$("#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);
      });
    }
  });

＆＃13;

<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>

＆＃13;

Answer 1

在行之前放置unbind，如下所示：

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

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

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

1 个答案: