Javascript 要输入的jQuery文本"；“接管”；

奇怪的是，我已经为编辑用户传记设置了jQuery效果。基本上，他们可以单击文本并创建文本区域。这很好，接管很好。。。但只有一次

html:

{{some.user.bio}

js（流线型和浓缩型）：

$（'bioEdit'）。在（'click'，function（）上{
var$input=$（''）.val（$（'#bioEdit'）.text（）；
$（'#bioEdit'）。替换为（$input）；
var save=function（）{
var$p=$（'
）.text（$input.val（））；
var传记=$input.val（）
$input.replaceWith（$p）；
};
$input.one（'blur'，save）.focus（）；
});

---

任何人都可以复制此一次性输入接管吗？如果是这样的话，您知道允许用户多次编辑的方法吗？

请仔细查看这一行：

$('#bioEdit').replaceWith( $input );

删除

#bioEdit

，将

$input

放在原处。这意味着网页上不再有

#bioEdit

。因此，

$（'bioEdit'）。在（'click'，…）

上只生效一次

您可以将

#bioEdit

包装在一个容器中，并仅替换容器内容：

<div id="bioEditContainer">
<p id="bioEdit" style="text-align: center;" data-editable>{{ some.user.bio }}</p>
</div>

---

在编辑后创建新的DOM元素，而单击处理程序绑定到旧的DOM元素。如果希望单击处理程序也处理新创建的元素，则需要修改它以使用委派事件

$(document).on('click', '#bioEdit', function() {
    // Your code here
});

您还可以

.clone（true）

在将

元素替换为

之前将其克隆，然后将输入替换为克隆副本。看见为克隆提供

true

将复制包含事件的元素

---

但是，第一种方法比每次用户想要编辑文本时克隆元素的效果更好，使用的内存和资源更少。

当您用

替换元素时，您将丢失单击事件处理程序。replaceWith

您可以通过创建可重用函数来重新附加事件：

函数editFn（）{
var$input=$（''）.val（$（'#bioEdit'）.text（）；
$（'#bioEdit'）。替换为（$input）；
var save=function（）{
var$p=$（'
）.text（$input.val（））；
var传记=$input.val（）
$input.replaceWith（$p）；
$（'bioEdit'）。在（'click'，editFn）上；
};
$input.one（'blur'，save）.focus（）；
}
$（'bioEdit'）。在（'click'，editFn）；//将事件处理程序附加到此处

{{some.user.bio}

优雅的解决方案，工作正常！非常感谢。效果很好，但下面的答案似乎更优雅了一点？（我没有投反对票，但我会让社区决定接受哪个答案）@MichaelRoberts其他解决方案在整个文档上设置onClick处理程序，这意味着每次单击都将使用此功能进行处理。最终效果是一样的，但在内部，每次鼠标点击都需要检查——无论点击是否在

输入上。是的，这是这种方法的一个缺点。您可以将范围从文档缩小到更具体的容器。然而，在现实世界中，它不会以任何方式影响性能。许多第三方库将事件处理程序添加到文档和正文中当谈到jQuery时，我们不谈论性能，因为我们不知道它有好的性能。（但我不知道为什么有人会投反对票，因为它是完全有效的解决方案）如果你只是切换一下，它会很好，也不会那么复杂；隐藏和显示元素而不删除/替换它们，更改文档树会影响性能，并清理代码以供其他人阅读view@Michael这个解决方案可能是最理想的，而且很好，因为它不需要额外的容器和文档范围的点击处理程序。
<div id="bioEditContainer">
<p id="bioEdit" style="text-align: center;" data-editable>{{ some.user.bio }}</p>
</div>

$(document).on('click', '#bioEdit', function() {
    // Your code here
});