如何使用jQuery阻止表单提交？

Question

我有这个表格:

<form action='/Admin/Update' method='post'>
    <input type='text' name='dataUpdate' value=" + $temp + " />
    <input type='submit' value='Update'/>
</form>

这个jQuery:

$("form[action$='Update']").submit(function () {
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
});

表单提交自己......而我希望它是一个ajax调用.

我究竟做错了什么...

如果你们中的一些人知道mvc3你能否告诉我这是否会激活我的行动？

[HttpPost]
public ActionResult Update(string data)
{
    string data2 = data;   
    return View(_gMenus.GetMyMenus());
}

或者它不是用jQuery向这个方法发送变量的方法

更新:

即使我这样做..仍然有回发:

    $("#submit_btn").click(function () {

    return false;
});

也许我应该使用这种方法live()？

Answer 1

尝试使用event.preventDefault()停止所有浏览器操作.

$("form[action$='Update']").submit(function (event) {
    event.preventDefault();
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
});

或者,您可以将提交按钮更改为如下所示的简单按钮,

<input type='button' id="submit_btn" value='Update'/>

并更改提交处理程序以单击下面的处理程序,

$(document).ready (function () {
  $("#submit_btn").on ('click', function () {    
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
  });
});

编辑: 你应该.on在下面的语法中使用动态元素,(对于jQuery v1.7)

$(document).ready (function () {
   $(document).on ("click", "#submit_btn", function () {    
     $.post( $(this).attr("action") , $(this).serialize() );
     return false;
   });
});

使用.live旧版本,

$(document).ready (function () {
   $("submit_btn").live ("click", function () {    
     $.post( $(this).attr("action") , $(this).serialize() );
     return false;
   });
});