使用AJAX/jQuery动态创建表单时多次提交
Form submitting multiple times when created dynamically using AJAX/jQuery
我在一个项目中使用Google Maps API，而infoWindow内容是动态构建的，所以我不能使用文档就绪功能将验证程序分配给表单。
我正在使用、bootstrap、bootstrapValidator和jQuery。
我创建了一个函数，提交按钮调用它，在第一次点击，ok，1次调用，第二次点击，2次调用，3次调用，4次调用，等等…
我需要做什么，提交只被调用一次
这只发生在动态内容中，静态形式具有正常行为
这是代码，请看一下。
以下是动态创建的内容：
var content_string = '<div class="scrollFix"> <div id="divinfowindow"> <div class="container-fluid container-fluid-corrige"></div> <div class="row"> <div class="col-sm-3 img-corrige-60"> <img src="http://placehold.it/60x60" class="img-rounded"/> </div> <div class="col-sm-9 text-corrige"> <p>Por: Russell Bega</p> <p>Em: </p> <p class="white-space-normal">endereco</p> </div> </div> <form class="form-horizontal" role="form" id="formNovaMarcacao" action="/novaMarcacao"> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control" id="inputTituloNovaMarc" name="inputTituloNovaMarc" placeholder="Titulo"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <select id="inputCategoriaNovaMarc" name="inputCategoriaNovaMarc" class="form-control select-corrige"> <option>Escolha uma categoria</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-12"> <select id="inputSubCategoriaNovaMarc" name="inputSubCategoriaNovaMarc"class="form-control select-corrige"> <option>Escolha uma categoria</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" id="inputDescricaoNovaMarc" name="inputDescricaoNovaMarc" rows="3" placeholder="Descricao"></textarea> </div> </div> <div class="form-group"> <div class="pull-right"> <button type="submit" id="btnNovaMarc" onclick="validaNovaMarcacao()" name="btnNovaMarc" class="btn btn-default" data-loading-text="Postando...">Postar</button> </div> </div> </form> <div id="statusNovaMarc"></div> </div> </div>';
这是验证码：
function validaNovaMarcacao(){
$('#formNovaMarcacao').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
container: 'tooltip',
submitButtons: btnNovaMarc,
fields: {
inputTituloNovaMarc: {
validators: {
notEmpty: {
message: 'Este campo não pode ser vazio.'
}
}
}
}
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
var dados = {
inputTituloNovaMarc : $("#inputTituloNovaMarc").val(),
};
var formURL = $(this).attr("action");
//console.log(dados);
$('#btnNovaMarc').button('loading');
jQuery.ajax({
type: "POST",
dataType: "json",
url: formURL,
data: dados,
success: function( data )
{
alert("ok" + data);
},
error : function (data){
}
});
$('#btnNovaMarc').button('reset');
return false;
});
}
以下是缩进的内容字符串：
<div class="scrollFix">
<div id="divinfowindow">
<div class="container-fluid container-fluid-corrige"></div>
<div class="row">
<div class="col-sm-3 img-corrige-60"> <img src="http://placehold.it/60x60" class="img-rounded"/> </div>
<div class="col-sm-9 text-corrige">
<p>Por: Russell Bega</p>
<p>Em: </p>
<p class="white-space-normal">endereco</p>
</div>
</div>
<form class="form-horizontal" role="form" id="formNovaMarcacao" action="/novaMarcacao">
<div class="form-group">
<div class="col-sm-12"> <input type="text" class="form-control" id="inputTituloNovaMarc" name="inputTituloNovaMarc" placeholder="Titulo"> </div>
</div>
<div class="form-group">
<div class="col-sm-12">
<select id="inputCategoriaNovaMarc" name="inputCategoriaNovaMarc" class="form-control select-corrige">
<option>Escolha uma categoria</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<select id="inputSubCategoriaNovaMarc" name="inputSubCategoriaNovaMarc"class="form-control select-corrige">
<option>Escolha uma categoria</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-12"> <textarea class="form-control" id="inputDescricaoNovaMarc" name="inputDescricaoNovaMarc" rows="3" placeholder="Descricao"></textarea> </div>
</div>
<div class="form-group">
<div class="pull-right"> <button type="submit" id="btnNovaMarc" onclick="validaNovaMarcacao()" name="btnNovaMarc" class="btn btn-default" data-loading-text="Postando...">Postar</button> </div>
</div>
</form>
<div id="statusNovaMarc"></div>
</div>
</div>
这里是服务器端日志，请注意时间戳。
INFO 2014-10-16 02:20:08,765 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:17,447 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:17,448 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:26,375 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:26,391 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:26,394 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:34,132 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:34,170 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:34,177 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:34,178 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
从函数validaNovaMarcacao中删除以下部分，并将其放入DOM ready中，在那里只调用一次：
$('#formNovaMarcacao').bootstrapValidator({
//.....
.on('success.form.bv', function(e) {
//......
});
实际上，每次调用函数validaNovaMarcacao时，都会重新初始化验证器并附加另一个成功事件处理程序；从呼叫次数的顺序来看，这一点非常明显：1、2、3、4。。。
应为：
$(function() {
$('#formNovaMarcacao').bootstrapValidator({
//.....
.on('success.form.bv', function(e) {
//......
});
});
更新
根据下面的讨论，以下是您需要进行的更改：
将功能简化为以下内容：
function formNovaMarcacao() {
$('#formNovaMarcacao').bootstrapValidator({
//.....
});
}
然后是以下内容：
$(function() {
formNovaMarcacao();
$('#formNovaMarcacao').on('success.form.bv', function(e) {
//......
});
});
你最好不要使用内联JS onclick=...。。这不是一个好的做法。创建动态表单内容后立即运行formNovaMarcacao()。
这样就可以了。
相关文章：
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型，然后提交表单
- 添加和删除隐藏字段数组中的值，而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单，并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单，但仍然允许回车工作
- 使用按钮和单选按钮提交表单，但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单，同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时，使用JavaScript提交表单
- 提交表单后，Watir文本框输入未持续(重置为以前的文本框输入）
