Bootstrap 3表单验证器干扰jQuery中的点击事件？

Question

所以我正在为客户开发一个项目，他们正在使用 Bootstrap 3 的表单验证小部件。还有一个提交按钮，我试图在其上放置一个自定义的“.click()”事件，但无论如何它都不会被调用。

在检查元素中，我可以看到 bootstrap.min.js 中有许多点击事件处理程序。我想这就是罪魁祸首。过去有没有人遇到过这个问题？

代码：

var fieldsFilled = false;

   //Iterate through all the input fields/textarea of the feedback form
   $('#fbForm').find('input, textarea').each(function () {
       //Each time a key is pressed while the input has focus
       $(this).keyup(function () {
           //Check if fields are empty
           fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

           //If fields are filled and terms is checked then enable Submit
           if(fieldsFilled) {
               $("#btnSubmit").css("pointer-events","auto");
           } else {
               $("#btnSubmit").css("pointer-events","none");
           }
       });
   });

   $('#terms').change(function () {
       fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

       if(fieldsFilled) {
           $("#btnSubmit").css("pointer-events","auto");
        } else {
           $("#btnSubmit").css("pointer-events","none"); 
       }
   });

   //Checks if the form id has blank text fields
   function checkFormFieldsEmpty(id) {
       var filled = true;

       $(id).find('input, textarea').each(function () {
           //Check whether the input/textarea is blank
           if(!$(this).val()) {
               //If the input/textarea is empty return false
               filled = false;
           }
       });

       return filled;
   }

    $(document).on('click', '#btnSubmit', function (event) {
        alert('this');

        if($('#btnSubmit').hasClass('disabled')) {
            alert('empty');
        } else {
            grecaptcha.execute();
            grecaptcha.render();
        }
    });

其他部分：

    <fieldset>

    <!-- Form Name -->
    <div  class="text-center">
        <h2><b>Feedback Form</b></h2><br>
    </div>
    <!-- Name: Text input-->

    <div class="form-group">
      <label for="name "class="col-md-4 control-label">First Name</label>  
      <div class="col-md-4">
      <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text"  placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
        </div>
      </div>
      <div class="help-block with-errors"></div>
    </div>


    <!-- Surname: Text input-->

    <div class="form-group">
      <label class="col-md-4 control-label" for="surname">Last Name</label> 
        <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
        </div>
      </div>
      <div class="help-block with-errors"></div>
    </div>



    <!-- Country: Text input-->

    <div class="form-group">
      <label class="col-md-4 control-label" for="country">Country</label> 
        <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
      <input type="text" placeholder="Country"name="country" id="country" class="form-control" data-minlength="2" data-error="Minimum Lenght of Country must be made up of at least 2 characters!" value="<?= $country ;?>" required>
        </div>
      </div>
      <div class="help-block with-errors"></div>
    </div>



    <!-- Email: Email input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="email">E-Mail</label>  
        <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
        <input type="email" name="email" id="email" class="form-control" placeholder="E-Mail Address" value="<?= $email ;?>" required>
        </div>
      </div>
      <div class="help-block with-errors"></div>
    </div>

    <!-- Comment -->

     <div class="form-group">
     <label class="col-md-4 control-label" for="comment">Comment</label>
        <div class="col-md-4 inputGroupContainer">
            <div class=" input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                <textarea name="comment" id="comment" class="form-control" name="comment" placeholder="Please enter comment..." rows="5" cols="25" data-minlength="10" data-error="Minimum Lenght of Comment must be made up of at least 10 characters!" value="<?= $comment ;?>" required></textarea>
            </div>
        </div>
        <div class="help-block with-errors"></div>
    </div>

    <!-- GDPR Disclaimer -->
    <div class="form-group text-justify">
    <label class="col-md-4 control-label" for="comment">GDPR Disclaimer</label>
    <div class="col-md-4 inputGroupContainer">
    <p>By ticking the below tick box, I hereby give my consent for the personal information which I am providing in this application to be processed and recorded by the Agriculture Directorate, and to exchange this information with Public Authorities, Government Departments and any other third parties, as necessary , in order to process this application and as permitted by Maltese Law.</p>
    </div>
    </div>


    <!-- GDPR Checkbox -->


      <div class="form-group text-center">
    <div class="checkbox">
      <label>

        <input  type="checkbox" id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
        I agree
      </label>

      <div class="help-block with-errors"></div>
    </div>
  </div>



    <!-- reCaptcha -->
<!--  

    <div class="form-group text-center">
    <label class="col-md-4 control-label"></label>
        <div class="g-recaptcha col-md-4" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback" data-sitekey="6Lf3JDAUAAAAAJ3Y4oPhVeuAx0K98sCCYju7HcT1" ></div><!-- change this if moved to website and register website at google recaptcha
    <input type="hidden" class="form-control" data-recaptcha="true" required>
        <div class="help-block with-errors"></div>
    </div>
-->    
    <!-- Button -->
    <div class="form-group">
      <label class="col-md-4 control-label"></label>
      <div class="col-md-4"><br>
       <!-- NOTE: Made some changes for click events as advised here: https://developers.google.com/recaptcha/docs/invisible#programmatic_execute -->
        <button id="btnSubmit" type="submit" value="" class="btn btn-success">SUBMIT <span class="glyphicon glyphicon-send"></span></button>
        <div class="g-recaptcha" data-sitekey="6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF" data-callback="onSubmit" data-size="invisible"></div>
        <!-- Test: 6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN -->
        <!-- Live: 6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF -->
      </div>
    </div>

    </fieldset>
    </form>

Answer 1

这是表单标签内的type="submit" 按钮。它的正常行为是提交表单，结果是重新加载页面（或加载在打开表单标记的action 属性中找到的 URL）。那是瞬间的。它不会“等待”实际页面上其他任何内容的执行。

如果你想在提交之前执行任务，你必须prevent that normal behavior：

$(document).on('click', '#btnSubmit', function (event) {
    event.preventDefault();

    // ... Your additionnal validations

    // When ready to submit:
    $(this).closest("form").submit();
});

顺便说一句，这个条件if($('#btnSubmit').hasClass('disabled')) 永远不会为真......因为点击事件不会在禁用的元素上触发。