为啥提交按钮仅在我的示例中按下两次时才起作用?

Posted

技术标签:

【中文标题】为啥提交按钮仅在我的示例中按下两次时才起作用?【英文标题】: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();
);

【问题讨论】:

【参考方案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,从而移动了阻止它被点击的按钮。它发生得非常快……在您真正成功点击按钮之前。

【讨论】:

以上是关于为啥提交按钮仅在我的示例中按下两次时才起作用?的主要内容,如果未能解决你的问题,请参考以下文章

为啥 xmlHttpRequest.Open 仅在我输入字符串时才起作用?

VueJs:按钮单击仅在单击两次时有效

为啥我的表单提交两次?

InputBindings只在聚焦时才起作用

为啥我需要在提交按钮上单击两次才能提交我的表单?

如何以编程方式在android中检测设备电源按钮按下两次