爲什麼提交按鈕僅在我的示例上按兩次時才起作用？

Question

請看看這個小提琴：

http://jsfiddle.net/uNbYu/1/

當按鈕被按下，一旦提交，它消除了無緣無故的文本編輯，但不會做任何事情，但第二次，它的工作當按下，並進入頁面。

請幫我理解此代碼的作用。

感謝

---

HTML：

<b class = "edit" id = "fooo"> FOO </b> 

JS：

$('b.edit').click(function() { 
    $(this).hide().after('<form action = "foo.php" method = post><input hidden name = "field" type = "text" value = "' + this.id + '"/><input type="text" name = "period" class="editP" value="' + $(this).html() + '" /><input type = "submit" value = "Submit!!" /></form>'); 
    $('.editP').focus(); 
}); 
$('.editP').live('blur', function() { 
    $(this).hide().prev('b.edit').html($(this).val()).show(); 
}); 

Answer 1

的問題是，編輯框失去焦點您管理單擊按鈕從而改變了位置，這樣你就不會按下按鈕前。

Answer 2

這是你的代碼這樣說：

1. 當TEX t被點擊，創建一個新的輸入元素，提交按鈕和表單。
2. 在模糊隱藏輸入元件（未提交按鈕）

所以，當你點擊提交第一次它實際上是發射模糊事件和隱藏的輸入。

此外，您的舊文本不會被重新顯示，因爲您使用.prev來獲取它。這選擇了前一個相鄰的兄弟，但是因爲輸入元素是一種形式，另一個元素不是兄弟姐妹。

這小提琴應該讓什麼是錯的更明顯。請注意初始警報如何檢索文本FOO。也請嘗試點擊提交按鈕。

http://jsfiddle.net/uNbYu/8/

Answer 3

1）當您單擊文本時，您的代碼將創建窗體並將焦點放在.editP上。

$('.editP').focus(); 

2）你的代碼的其餘部分說隱藏.editP當它失去焦點（模糊）。

$('.editP').live('blur', function(){ 
    $(this).hide().prev('b.edit').html($(this).val()).show(); 
}); 

3）所以試圖點擊按鈕的行爲造成的模糊事件觸發editP。這隱藏了.editP，從而移動了防止被點擊的按鈕。它發生得非常快......在您實際上成功點擊按鈕之前。