为啥提交按钮仅在我的示例中按下两次时才起作用?
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
,从而移动了阻止它被点击的按钮。它发生得非常快……在您真正成功点击按钮之前。
【讨论】:
以上是关于为啥提交按钮仅在我的示例中按下两次时才起作用?的主要内容,如果未能解决你的问题,请参考以下文章