使段落可編輯

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/