在preventDefault之后表单仍然提交？答案

【问题标题】：Form still submitting after preventDefault?在preventDefault之后表单仍然提交？
【发布时间】：2014-05-26 13:58:29
【问题描述】：

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

但无论出于何种原因，表单仍然执行通常的帖子并转到页面而不是 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>

【问题讨论】：

modal-dialog 是否已经存在于 DOM 中？
放一个'return false;'关于您的提交处理函数的声明并查看...
表单是否也通过 ajax 提交？你在对话框中有一个实际的表格吗？ <form .......> ........</form> ... 我可以看到一个提交按钮和两个按钮，但我没有看到 <form...> 或 </form>。
@WereWolf-TheAlpha 不，一切都是通过 jquery 添加到 dom 的。
@user3558931 表单是一个简单的表单结构，例如

标签： jquery html asp.net-mvc twitter-bootstrap

【解决方案1】：

替换

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

与

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

【讨论】：

【解决方案2】：

当您创建对话框时，您并没有将 html 插入 DOM。

【讨论】：

我认为你可能是正确的，让我检查一下。

【解决方案3】：

我猜你设置了表单 runat="server" 这就是表单每次都提交的原因。我建议如果不是 runat="server" 不是必需的。从表单标签中删除该属性

【讨论】：