下面是bootstrap下拉列表的html部分。在提交按钮时，我想调用ajax。但是下面的函数没有被触发，而是提交了表单，我可以在url中看到带有查询字符串的同一页面。如果有人可以帮我解决如何触发提交，那将非常感谢.....
$('#form_createuserconfig').validator().on('submit', function (e){
if (e.isDefaultPrevented()) {
//do error handling
}else{
//make ajax call
if(transaction is ok){
window.location.href="go to my page";
else{
//show error and let user try again
}
e.preventDefault();
}
});
下面是html
<div id="div_login_dropdown" class="dropdown pull-right" style="xborder:1px solid black;margin-top:-2.3em;margin-right:-0.1em">
<!-- a class="btn btn-default btn-lg" data-target="#" role="button">Log in</a-->
<button id="btn_login_ddown" class="btn btn-default" type="button" id="menu1" data-toggle="dropdown" >Log in
<span class="caret"></span>
</button>
<ul id="ul_logtabs" class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="menu1" style="margin-top:-1em;smargin-right:-0.1em;width:20em;heixght:20em">
<li xrole="presentation">
<div class="modal-body" style="xborder:1px solid red">
<div class="well" style="xborder:1px solid green;margin-bottom:.1em">
<ul class="nav nav-tabs">
<li class="active"><a href="#tablogin" data-toggle="tab">Login</a></li>
<li><a href="#tabcreate" data-toggle="tab">Create Account</a></li>
</ul>
<div id="myTabContent" class="tab-content" xstyle="xborder:1px solid green">
<div class="tab-pane active in" id="tablogin">
<form class="form" action='' method="POST">
<fieldset>
<div id="legend">
<legend class=""></legend>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required tabindex="21">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required tabindex="22">
<div class="help-block text-right"><a data-target="#" href="">Forgotten your password ?</a></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label><input type="checkbox"> keep me logged in</label>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="tabcreate">
<form id="form_createuserconfig" role="form" data-toggle="validator">
<fieldset>
<div id="legend">
<legend class=""></legend>
</div>
<div id="createsection" style="display:none">
<div classx="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="first_name" class="form-control input" placeholder="First Name" value='' required data-toggle="tooltip" title="First Name" tabindex="1">
</div>
</div>
<div classx="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="last_name" class="form-control input" placeholder="Last Name" value='' required data-toggle="tooltip" title="Last Name" tabindex="2">
</div>
</div>
<div class="form-group">
<input type="email" name="email_add" id="email_add" class="form-control input" placeholder="Email Address" value='' data-error="Looks like that email address is invalid" required data-toggle="tooltip" title="Email Address" tabindex="3">
<div class="help-block with-errors"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="usr_password" id="usr_password" class="form-control input" placeholder="Password" value='' data-minlength="8" required
data-toggle="tooltip" tabindex="4">
<span class="help-block" style="font-size:0.7em">Min 8 characters</span>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password_confirmation" id="password_confirmation" class="form-control input" data-match="#usr_password" data-match-error="these don't match" required placeholder="Confirm Password" value='' data-toggle="popover" title="Confirm your password" tabindex="5">
<span class="help-block" style="font-size:0.7em">numbers [#@$_!-] upper/lower cases</span>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="entity_type" id="entity_type" class="form-control input" placeholder="Type" value='' style="display:none">
</div>
<div class="form-group">
<input id="btn_createaccount" type="submit" class="btn btn-primary btn-block" value="Create Account"></input>
</div>
<div class="row" id="errordisplay" style="display:none">
<div class="alert alert-danger">
<!-- a href="#" class="close" data-dismiss="alert">×</a-->
<strong>Oops! </strong><label id="errorcontainer"></label>
</div>
</div>
<div id="a_alternateaccountcreationchoice" style="font-size:0.7em;margin-bottom:-3em;xborder:1px solid black" class="pull-right"><a href="#">Wrong account? Click here...</a></div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
答案 0 :(得分：0)
我的第一个建议是使用jQuery Validate插件而不是您尝试使用的插件（我假设这是一个：Bootstrap Validator plugin）。
这可能不适用于您的环境，因此......在坚持使用现有插件时，@ Octav是正确的。您需要为表单分配您要调用的ID（id="form_createuserconfig"）。接下来，您的初始else语句中的if / else语句缺少括号（}）。当缺少它时，JS会在Firebug中抛出一个错误。
一旦错误得到解决，我相信您需要将e.preventDefault（）放入secondary else子句中。一旦你这样做，事情将按你的意愿工作。我在我的环境中使用该验证器插件尝试了它们，我相信事情按预期工作。请参阅下面的代码。为了测试，我将变量从true切换为false。
$('#form_createuserconfig').validator().on('submit', function (e){
if (e.isDefaultPrevented()) {
//do error handling
} else {
var isTrue = true;
if(isTrue){
alert('Everything is OK');
} else {
//show error and let user try again
alert('AJAX Error');
e.preventDefault();
}
}
});
希望这有帮助。