Question

请看这个小提琴：

当按下提交按钮一次时，它会删除文本编辑，没有任何明显的原因，但是没有做任何事情，但第二次，按下时它会起作用，然后进入页面。

请帮助我了解这段代码的用途。

由于

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

这是您的代码所说的：

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

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

此外，您的旧文本未被重新显示，因为您使用.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）因此尝试点击按钮的行为会导致模糊事件在editP上触发。这会隐藏.editP，从而移动按钮，防止其被点击。它发生得非常快......在你真正成功点击按钮之前。

为什么提交按钮仅在我的示例中按两次时才有效？

3 个答案: