爲什麼我不能觸發提交按鈕的最接近的形式？

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; 
});