我想通过单击使<p>标记可编辑。我的问题:只能编辑一次。第二次单击后,我在控制台中收到一条错误消息。

在这里查看小提琴: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);
        });
    });


谁能看到标签只能被编辑一次而不是第二次点击的原因?

最佳答案

您替换了p,因此点击处理程序不再起作用。解决该问题的最简单方法是使用事件委托。将文档中的事件处理程序声明更改为

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

Demo

关于javascript - jQuery:编辑标记仅可使用一次,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24597263/

10-11 23:27
查看更多