使段落可编辑

Question

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

JSFIDDLE

HTML：

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

SCRIPT：需要

$(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

您改回了一个pragraph后你没有指定的ID。 更改此行

viewavleText = $('<p>'); 

对此

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

Answer 2

只是一个小小的改变，你需要保持一段ID。

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

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