为什么在我的示例中，提交按钮仅在按两次时才起作用？

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. 单击文本时，创建一个新的输入元素，提交按钮和表单。
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 ，从而将其移到按钮上，从而防止其被单击。它发生得非常快......在您真正成功单击按钮之前。