Question

我正在动态加载到页面上，然后设置事件以捕获并处理表单提交。

但无论出于何种原因，表格仍然是常用的帖子并转到页面而不是ajax帖子。

我很确定这一切都是正确的，但无法找出原因？

我像这样动态加载表单：

$('body').on('click', 'a[data-toggle="modal"]', function (e) {
    var action = $(this).attr('href');

    $.ajax({
        url: action,
        type: "GET",
        success: function (response) {
            $('<div class="modal fade"></div>').html(response).modal();
            hookupFormSubmit();
        }
    });

    e.preventDefault();
});

hookupFormSubmit看起来像这样：

var hookupFormSubmit = function () {

    $('.modal-dialog').on('submit', 'form', function (event) {
        event.preventDefault();

        var $form = $(this);

        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),

            success: function(data, status) {

                $form.closest('.modal').modal('hide');

            }
        });

    });
};

我的表格本身：

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary(true)
                @Html.EditorForModel()
                <p>
                    <input type="submit" value="Send Message!" />
                </p>
            }
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Answer 1

替换

$('.modal-dialog').on('submit', 'form', function (event) {

带

$('.modal').on('submit', 'form', function (event) {

Answer 2

我猜你设置表单runat =“server”这就是为什么表单每次都提交。我建议如果不是runat =“server”不是必需的。从表单标记

中删除此属性

Answer 3

创建对话框时，您不会将html插入DOM。

表格仍然在preventDefault后提交？

3 个答案: