所以我正在为一个客户开发项目，他们正在使用Bootstrap 3的表单验证小部件。还有一个提交按钮，我正在尝试在其上放置一个自定义'.click（）'事件，但是无论如何都不会调用它。
在inspect元素中，我可以看到bootstrap.min.js中有许多click事件处理程序。我在想这是罪魁祸首。以前有没有人遇到过这个问题的经验？
代码：
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>
答案 0 :(得分：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'))这个条件永远不会成立...因为click事件不会在禁用的元素上触发。