Javascript 使用AJAX/jQuery动态创建表单时多次提交表单

我在一个项目中使用GoogleMapsAPI，并且infoWindow内容是动态构建的，所以我不能使用DocumentReady函数将验证器分配给表单

我正在使用，bootstrap，bootstrapValidator和jQuery

我创建了一个函数，提交按钮调用它，在第一次单击中，确定，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>';

以下是缩进的内容字符串：

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

---

从函数

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) {
        //......
    });
});

然后是：

function formNovaMarcacao() {
    $('#formNovaMarcacao').bootstrapValidator({
        //.....
    });
}

$(function() {
    formNovaMarcacao();
    $('#formNovaMarcacao').on('success.form.bv', function(e) {
        //......
    });
});

最好不要使用内联JS

onclick=…

。。这不是个好习惯。创建动态表单内容后立即运行

formNovaMarcacao（）

---

这应该就够了。

如果你确定你的帖子中有一个明确的问题，你可能会得到更多的答案。谢谢你的建议=）对不起，我没有得到确切的答案。我尝试了`函数validaNovaMarcacao（）{$（函数（）{$（'#formNovaMarcacao'）。bootstrapValidator（{/..close-close…`您正在调用函数

validaNovaMarcacao（）

多次。每次调用它时，您都会添加一个额外的表单提交。删除该函数或显示其余代码。没有更多内容可显示，我只有这个表单，当我在地图中单击时，该表单会动态创建，表单会调用Validanova Marcacao（），仅表单调用该函数，但如果我多次单击“提交”按钮，我会收到越来越多的调用。例如，如果验证返回错误，我需要修复字段并再次尝试提交，在这种情况下，我在“提交”按钮上单击了2次，（1次用于验证，1次用于获取错误，修复了字段，另一次用于再次尝试提交），我将得到2个对服务器的调用。您何时何地调用该函数？