使用jQuery的.on()方法防止Ajax.BeginForm中提交的默认行为

Question

我在视图中有一个表单,我使用Ajax.BeginForm.我想用javascript代码更改提交按钮的默认行为.我用.on()方法附加了一个处理程序,在处理程序中,我调用了preventDefault()方法.我想知道为什么当我将处理程序附加到根DOM元素时,默认行为不会被取消,但是当我将处理程序直接附加到表单DOM元素时,默认行为将被取消.

风景:

@using (this.Ajax.BeginForm("GetList", "Report", null, new AjaxOptions(), new {id = "OptionForm"}))
{
   <input type="submit" id="submitButton"/>
}

将处理程序附加到根DOM元素的脚本(不起作用):

<script type="text/javascript">
   $(function () {         
      $(document).on("submit", "#OptionForm", refreshGrid);
   })
</script>

处理程序:

refreshGrid: function (event) {
    event.preventDefault();

    $.ajax({
        url: url,
        type: "POST",
        data: $(this).serialize(),
        success: function (data) {
            if (data.success) {
                $("#ReferenceList").html(data.result);
            }
            else {
                $("#ValidationSummary").html(data.result);
            }
        }
    });
}

最后将处理程序附加到表单DOM元素(Works)的代码:

<script type="text/javascript">
   $(function () {         
      $("#OptionForm").submit = refreshGrid;
   })
</script>

谢谢.

Answer 1

Ajax.BeginForm如果您要手动处理AJAX提交,那么使用它真的没有意义.标准Html.BeginForm就足够了,因为您不需要累积多个.submit()处理程序:

@using (Html.BeginForm("GetList", "Report", null, FormMethod.Post, new { id = "OptionForm" }))
{
   <input type="submit" id="submitButton" />
}

然后:

<script type="text/javascript">
   $(function () {         
      $(document).on('submit', '#OptionForm', refreshGrid);
   });
</script>

和refreshGrid功能:

var refreshGrid = function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (data) {
            if (data.success) {
                $('#ReferenceList').html(data.result);
            }
            else {
                $('#ValidationSummary').html(data.result);
            }
        }
    });

    return false;
}