javascript - 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('点击');

此事件附加到打开模式的函数。

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

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