javascript - jQuery:编辑标签只能工作一次

Question

我想做一个<p>标签可通过单击进行编辑。我的问题:它只能编辑一次。第二次单击后，我的控制台中收到一条错误消息。

请参阅此处的 fiddle :http://jsfiddle.net/LnD8d/1/

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，因此点击处理程序不再起作用。解决这个问题最简单的方法是使用事件委托(delegate)。更改文档内的事件处理程序声明准备

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

Demo