Question

我在项目中使用Google Maps API，并且infoWindow内容是动态构建的，因此我无法使用文档就绪函数将验证程序分配给表单。

我正在使用，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>';

以下是验证码：

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 -

Answer 1

从函数validaNovaMarcacao中删除以下部分，并将其放入DOM准备就绪，只调用一次：

$('#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()创建动态表单内容。

应该这样做。

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

1 个答案: