Question

我正在使用Jquery表单插件，该表单是通过Bootstrap模式中的Ajax加载的。模态主体是通过jquery的.load（）函数加载的，加载后，我正在执行一个函数，该函数使用.ajaxForm（）将模态内的表单绑定到Jquery Form Plugin的实例。

一切似乎都按预期进行，控制台中没有出现任何错误，但是当我尝试提交表单时，绝对没有任何反应。我没有使用preventDefault（），因此从理论上讲，如果不受Jquery Form Plugin的影响，则该表单将正常提交。我已经花了几个小时尝试解决此问题，却一无所获。一些帮助将不胜感激。

旁注：我还在此表单上使用CKeditor，并通过一个函数在加载模态后触发该函数来加载它，但它工作正常。

以下是表单的html：

<form action="posts/new" method="post" class="html-snippet" id="section-45">
<div class="row">
    <fieldset>
        <section class="col col-md-12">
            <div class="form-group">
                <label><h4>Snippet Title</h4></label>
                <input type="text" name="title" placeholder="Snippet Title" class="form-control" value="">
            </div>
        </section>
    </fieldset>
    <fieldset>
        <section class="col col-md-12">
            <div class="form-group">
                <label><h3>HTML Content</h3></label><br />
                <textarea name="html" id="html-45"></textarea>
            </div>
        </section>
    </fieldset>
</div>
<div class="clearfix"></div>
<div class="modal-footer">
    <button type="reset" class="btn btn-default" data-dismiss="modal">
        Cancel
    </button>
    <button type="submit" id="publish-45" class="btn btn-primary">
        Publish HTML
    </button>
</div>

以下是加载模式和模式内容的javascript：

            $('.configure-btn').on('click',function(){
               var id = $(this).closest('li').attr('id');
               var type = $("#" + id).attr("data-type");
               $('#popup').modal('show');
               $('.modal-content').load('/modals/sections', { 'section_id': id }, function( data ) {
                  $( ".modal-content" ).html( data );
                  loadEditor(id);
                  loadHtmlForm(id);                        
               });
            });

最后，这是loadHtmlForm（）函数的代码：

function loadHtmlForm(id){
var options = {
    beforeSerialize: function(form, options) { 
        for(instance in CKEDITOR.instances){
            CKEDITOR.instances[instance].updateElement();
        }
    },
    beforeSubmit: function validate(formData, jqForm, options) { 
        var titleValue = $('input[name=title]').fieldValue(); 
        var htmlValue = $('input[name=html]').fieldValue(); 
        if (!titleValue[0] || !htmlValue[0]) { 
            swal({
                title: "Form not complete!",
                text: "You cannot submit the form without filling in the fields, playa!",
                icon: "error",
                timer:1800
            });
            return false; 
        } 
        return true;
    },
    success: function() {
        swal({
            title: "Perfect!",
            text: "You created a new section!",
            icon: "success",
            timer:1800
        });
        $('#popup').modal('toggle');
    }
};
$("#section-" + id).ajaxForm(options);

}

在此函数中的任何时候（除了成功函数之外），我都可以添加alert（）或console.log（）并验证其是否正确触发。但是，没有迹象表明当您按下“提交”按钮时，表单实际上甚至在尝试提交。什么都没发生。

jQuery表单插件不会在Bootstrap模式下提交

0 个答案: