Question

我有一个模态表单 - bootstrap css - 每按一次按钮就会提交一个额外的时间，例如：

首次点击，1提交
第二次点击，2次提交
第三次点击，3次提交
等等

我使用的jQuery如下。从另一个模态（动态创建）调用模态，因此我需要使用$（document）调用方法。我已经尝试了$（文件）.on（'submit'，'＃post_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'）;

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

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

jasmine.Spy

Answer 2

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

Answer 3

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

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

3 个答案: