使段落可编辑

Question

我想创建可编辑的段落点击。我做了段落可编辑，但只有一个问题是，当我点击外面的文本区域，它变成了段落，那是正确的，但我第二次点击段落，它不工作。我真的很抱歉我的英语。非常感谢你帮我。

JSFIDDLE

HTML：

<p id="about">This is paragraph</p>

剧本：

 $(document).ready(function() {
        function paraClicked() {
        var aboutText = $('#about').html();
        var editableText = $('<textarea />').css({'width': '100%', 'font-size': '20px'});
        editableText.val(aboutText);
        $('#about').replaceWith(editableText);
        editableText.focus();
        editableText.blur(editableTextBlured);
    }
    function editableTextBlured() {
        var text = $(this).val();
        viewavleText = $('<p>');
        viewavleText.html(text);
        $(this).replaceWith(viewavleText);
        $(viewavleText).click(paraClicked);
    }
    $('#about').click(paraClicked);
});

Answer 1

您没有指定id后，您将其更改为一个祈祷。更改这一行

viewavleText = $('<p>');

到这个

viewavleText = $('<p id="about">');

Answer 2

只需要一个小改动，您就需要保留段落id。

viewavleText = $('<p id="about">');

演示：http://jsfiddle.net/ddsrjppb/2/