为什么提交按钮只工作时按两次在我的例子

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，从而移动到按钮上，从而防止它被点击。它发生得非常快……才能真正成功点击按钮