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

【问题标题】：Why does the submit button only work when pressed twice on my example?为什么提交按钮仅在我的示例中按下两次时才起作用？
【发布时间】：2011-12-30 21:09:43
【问题描述】：

请看这个小提琴：

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();
});

【问题讨论】：

标签： javascript html forms submit textinput

【解决方案1】：

问题是编辑框在您设法单击按钮之前失去焦点，从而改变位置，这样您就不会点击按钮。

【讨论】：

他是绝对正确的。尝试删除.hide() 的两种情况，它可以工作。
@Marcus 有什么办法可以保留 .hide() 并保持这个？

【解决方案2】：

这就是你的代码所说的：

点击文本时，创建一个新的输入元素、提交按钮和表单。
在模糊时隐藏输入元素（不是提交按钮）

因此，当您第一次单击提交时，它实际上是触发了模糊事件并隐藏了输入。

此外，您的旧文本不会被重新显示，因为您使用 .prev 来获取它。这个选择上一个相邻的兄弟，但是因为输入元素在一个表单中，所以另一个元素不是兄弟。

这个 Fiddle 应该让错误更明显。请注意初始警报如何不检索文本 FOO。也可以尝试点击提交按钮。

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

【讨论】：

【解决方案3】：

1) 当您点击文本时，您的代码会创建表单并将焦点放在.editP。

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

2) 你的代码的其余部分说当它失去焦点（模糊）时隐藏.editP。

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

3) 所以试图点击按钮的行为会导致在editP上触发模糊事件。这隐藏了.editP，从而移动了阻止它被点击的按钮。它发生得非常快……在您真正成功点击按钮之前。

【讨论】：