Question

我想通过点击将<p>标记设为可编辑。我的问题：它只能编辑一次。第二次单击后，我在控制台中收到一条错误消息。

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);          
        });
    });

任何人都可以看到标签只能编辑一次而不是第二次点击的原因吗？

Answer 1

您替换了您的p，因此单击处理程序不再起作用。解决它的最简单方法是使用事件委派。将文档内的事件处理程序声明更改为

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

Demo

Answer 2

您可以使用delegated事件，切换到

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

Demo

Answer 3

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

viewableText.click(editDiv);

这将调用没有参数的editDiv（）（即element_to_be_edited和update_description将是未定义的。）

你可以像Tommi建议的那样做，或者另一个选择是简单地更新你已经拥有的现有元素，即你的模糊处理程序，如：

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

element_to_be_edited仍然会绑定原始事件处理程序，因此后续点击的工作方式与第一次完全相同。

也意味着您不必创建另一个新的DOM元素。

Answer 4

当您为editDiv中创建的新元素重新连接click事件时，editDiv函数将不会使用值填充element_to_be_edited，update_description参数。一种可能的方法是拥有一个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);
});

Answer 5

Demo试试这个，

你的viewableText.click(editDiv);没有回复你的功能。

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

jQuery：编辑标签只能工作一次

5 个答案: