为什么我不能触发提交按钮的最接近的形式？

Question

为什么我不能在下面的例子中触发提交按钮的最接近的形式？

HTML，

<form name="input" action="html_form_action.asp" method="get"> 
Username: <input type="text" name="user"> 
<input type="submit" value="Submit"> 
</form> 

jQuery的，

$('input[type=submit]').click(function(){ 

    $(this).closest('form').unbind('submit').submit(function(){ 
      alert("hello world"); 
     return false; 
    }); 
    return false; 
}); 

我应该得到的警告信息，但我不能。我做错了什么？

的jsfiddle

Answer 1

哇，这是一个很大冒泡事件......

你回头率虚假和有约束力和unbiding事件.. ，这是行不通的，但你可以简单的改变你的submit按钮正常button，例如：

<form name="input" action="html_form_action.asp" method="get"> 
    Username: <input type="text" name="user" /> 
    <input type="button" value="Submit" class="btn-submit" /> 
</form> 

，写

$(".btn-submit").click(function() { 
    $(this).prop("disabled", true); // dont allow more clicks 
    alert('about to submit...'); 
    $(this).closest("form").submit(); 
    alert('done!'); 
}); 

---

DEMO在JsBin：http://jsbin.com/elokov/1/

---

与Ajax调用提交表单

$(".btn-submit").click(function(evt) { 
    $(this).prop("disabled", true); // dont allow more clicks 
    alert('about to submit...'); 

    var frm = $(this).closest("form"); // our form 

    $.ajax(
     type: frm.attr("method"), 
     url: frm.attr("action"), 
     data: frm.serialize(), 
     success: function(data) { 
      alert('all went well'); 
     }, 
     success: function(jqXHR, textStatus) { 
      alert('err, something messed up! ' + textStatus); 
     } 
    ); 

    return false; // or use evt.preventDefault(); 
}); 

Answer 2

因为你的代码只是绑定提交事件但是并不触发提交事件。如果你只是想阻止提交表单，并改变那么这应该足够

$('input[type=submit]').click(function (e) { 
    alert("hello world"); 
    return false; 
});