Javascript jQuery：编辑标记只工作一次

我想通过单击

标记使其可编辑。我的问题是：它只能编辑一次。第二次单击后，我在控制台中收到一条错误消息

请看这里的小提琴：

HTML:

<div id="profile_description"><p>Click to add description</p></div>

单击以添加说明

JAVASCRIPT:

function editDiv(element_to_be_edited, update_description) {
    var divHtml = element_to_be_edited.text();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    element_to_be_edited.replaceWith(editableText);
    editableText.focus();

    // setup the blur event for this new textarea
    editableText.on('blur', function() {

        var html = $(this).val();
        var viewableText = $("<p>");
        viewableText.html(html);
        $(this).replaceWith(viewableText);
        // setup the click event for this new div
        viewableText.click(editDiv);

        // if update_description=true, update description ...
        if (update_description == true) {
           console.log('description has been updated'); 
        }    
    });

} // /function editDiv();

    $(document).ready(function() {
        $('#profile_description p').on('click', function() {
            console.log('click on p tag');
            var element_to_be_edited = $(this);
            var update_description = true;
            editDiv(element_to_be_edited, update_description);          
        });
    });

函数editDiv（要编辑的元素，更新描述）{
var divHtml=要编辑的元素。text（）；
var editableText=$（“”）；
editableText.val（divHtml）；
要编辑的元素。替换为（editableText）；
editableText.focus（）；
//为此新文本区域设置模糊事件
editableText.on（'blur'，function（）{
var html=$（this.val（）；
var viewableText=$（“”）；
html（html）；
$（this）.replacetwith（可视文本）；
//设置此新div的单击事件
可视文本。单击（编辑div）；
//如果update_description=true，则更新说明。。。
if（update_description==true）{
console.log（'说明已更新'）；
}    
});
}///函数editDiv（）；
$（文档）.ready（函数（）{
$（'#profile_description p'）。在（'click'，function（）上{
log（'click on p tag'）；
变量元素要编辑=$（此）；
var update_description=true；
editDiv（要编辑的元素，更新描述）；
});
});

---

有人知道为什么标签只能编辑一次而不能在第二次单击时编辑吗？

您替换了p，因此单击处理程序不再工作。解决此问题的最简单方法是使用事件委派。更改文档内的事件处理程序声明，以准备

$（'#profile_description'）。在（'click'，p'，function（）{

您可以使用事件，切换到

$(document).on('click', '#profile_description p', function() { ... }

---

创建新段落时，请使用以下命令再次设置事件侦听器：

viewableText.click(editDiv);

这将调用editDiv（），而不带任何参数（即，

要编辑的元素和
更新描述将是未定义的）

您可以按照Tommi的建议执行，或者另一个选项是简单地更新已有的元素，即在模糊处理程序上，类似于：

element_to_be_edited.text(html);
$(this).replaceWith(element_to_be_edited);

要编辑的元素
仍将绑定原始事件处理程序，因此后续单击将与第一次完全相同

这也意味着您不必创建另一个新的DOM元素。
当您重新连接在editDiv中创建的新元素的click事件时，editDiv函数将不会编辑元素，更新用值填充的描述参数。一种可能的方法是使用onclick函数，您可以第一次使用它将click事件连接起来，然后在editDiv中再次使用它

function editDiv(element_to_be_edited, update_description) {
    var divHtml = element_to_be_edited.text();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    element_to_be_edited.replaceWith(editableText);
    editableText.focus();

    // setup the blur event for this new textarea
    editableText.on('blur', function() {

        var html = $(this).val();
        var viewableText = $("<p>");
        viewableText.html(html);
        $(this).replaceWith(viewableText);
        // setup the click event for this new div
        viewableText.click(onClick);

        // if update_description=true, update description ...
        if (update_description == true) {
          console.log('description has been updated'); 
        }    
    });
} // /function editDiv();

function onClick(){
    console.log('click on p tag');
    var element_to_be_edited = $(this);
    var update_description = true;
    editDiv(element_to_be_edited, update_description);          
}

$(document).ready(function() {
    $('#profile_description p').on('click', onClick);
});

函数editDiv（要编辑的元素，更新描述）{
var divHtml=要编辑的元素。text（）；
var editableText=$（“”）；
editableText.val（divHtml）；
要编辑的元素。替换为（editableText）；
editableText.focus（）；
//为此新文本区域设置模糊事件
editableText.on（'blur'，function（）{
var html=$（this.val（）；
var viewableText=$（“”）；
html（html）；
$（this）.replacetwith（可视文本）；
//设置此新div的单击事件
可视文本。单击（onClick）；
//如果update_description=true，则更新说明。。。
if（update_description==true）{
console.log（'说明已更新'）；
}    
});
}///函数editDiv（）；
函数onClick（）{
log（'click on p tag'）；
变量元素要编辑=$（此）；
var update_description=true；
editDiv（要编辑的元素，更新描述）；
}
$（文档）.ready（函数（）{
$（'profile_description p'）。on（'click'，onClick）；
});
试试这个

您的
可查看文本。单击（editDiv）；
不回调函数

   viewableText.click(function(){
        editDiv($("#profile_description p"), true);
   });

那么，您在控制台中遇到了什么错误？