為什么在我的示例中，兩次按下提交按鈕才起作用？

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

這就是你的代碼說的：

1. 單擊文本后，創建一個新的輸入元素，提交按鈕和表單。
2. 模糊時，隱藏輸入元素（而不是提交按鈕）

因此，當您第一次單擊提交時，它實際上是觸發模糊事件並隱藏輸入。

另外，不會顯示舊文本，因為您使用.prev來獲取它。 這將選擇先前的相鄰同級，但是由於輸入元素為某種形式，因此其他元素不是同級。

這個小提琴應該使問題更明顯。 請注意初始警報如何不檢索文本FOO。 也嘗試單擊提交按鈕。

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

Answer 2

問題在於，在您設法單擊按鈕之前，編輯框會失去焦點，從而更改了位置，以致您不會單擊按鈕。

Answer 3

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

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

2）您其余的代碼說在失去焦點時會隱藏.editP （模糊）。

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

3）因此， 嘗試單擊按鈕的行為導致blur事件在editP上觸發。 這將隱藏.editP從而將其移至按鈕上方，以防止其被單擊。 它發生得非常快...在您實際上可以成功單擊按鈕之前。