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

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从而将其移至按钮上方，以防止其被单击。 它发生得非常快...在您实际上可以成功单击按钮之前。