首次提交后多次提交Bootstrap模式表单

Question

我有一个模式形式-bootstrap css-每单击一次按钮都会提交一个额外的时间，例如

1. 第一次点击，1次提交
2. 第二次点击，2提交
3. 第三次点击，3次提交
4. 等等

我使用的jQuery在下面。 该模态是从另一个模态（动态创建的）调用的，因此我需要使用$（document）调用方法。 我已经尝试过$（document）.on（'submit'，'#pos_form'，function（e）{...}）; 也可以使用e.preventDefault（），但这没有什么区别，'$（'＃posModal'）。remove（'＃pos_form'）;'也没有任何区别。

/* Calling page */  
    $(document).ready(function() {
        $('.posbutton').on('click', function(e) {
            var id = '#'+this.id;
             openSpinner();
            $.ajax({
                url: 'ajax_pos_form.php',
                 type: 'post',
                dataType: 'html',
                data: { GRIDCO: $(id).data('gridco'), project $(id).data('project'), gridconame: $(id).data('name') }
            })
            .done(function( response ) {
                if ( response) {
                    $('#posModal').html('');
                    $('#posModal').append(response);
                    $('#posModal').modal('show');
                }
                closeSpinner();
            });
        });
    });

/* page with modal form */
    $(document).ready(function() {
        $(document).on( 'click', '#submit', function(e){
             $.ajax({
                url: 'ajax_pos_form.php'
                , type: 'post'
                , dataType: 'json'
                , data: $('#pos_form').serialize()
                , success: function(response) {

                    if ( response.success ) {
                        $('#posModal').modal('hide');
                        return false;
                    }
                    else {
                        alert ( response.msg );
                        return false;
                    }
                    $('#posModal').remove('#pos_form');
                    $('#posModal').modal('hide');
                    return false;
                }
            });
            return false;
         });
    });

在我的测试页中，不是从模式调用的，它也不起作用。 任何帮助，将不胜感激

Answer 1

我在使用类似模式操作时遇到了相同的问题，并使用了：

（“ #modal_submit_button”）。unbind（'click'）;

此事件已附加到打开模式的功能。

这样，每次打开模式时，都会重置事件侦听器。

("#open_modal_button").click(function(){
    ("#modal_submit_button").unbind('click');
    ("#modal").modal('toggle');
    //OTHER CODE
}

Answer 2

我挖了我自己的陷阱，我不应该在动态创建的表单中包含表单的JS，而应该在基础文档中包含它。 我在这里找到答案

Answer 3

在这里，当您提交表单时，它将再次动态创建实例。 因此， $(document).on( 'click', '#submit', function(e){在点击$(document).on( 'click', '#submit', function(e){上调用jquery，而不是从html click button调用该方法，例如<button value="submit" onClick="submitForm();"/>然后将整个单击提交的方法放在SubmitForm（）方法中。