javascript - 焦点上的 Textarea 变成一个 DIV，单击该 div 时它会返回到 textarea？查询

Question

我正在尝试创建一个 node.js 应用程序以在两台机器之间传输代码。第一步是将代码粘贴到文本区域，然后按 Enter 键。按回车键后，它变成一个 div 或一个 <pre>。代码高亮。

我已经设置了通信。让我感到困惑的部分是如何将 div 变回文本区域。

如果我在文本区域外单击，它会变成一个 div，这一切都很好，但我无法让第二部分工作。

http://jsfiddle.net/GeJkU/1045/

HTML

<textarea id="chatText">123</textarea>

JS

$chatDiv = $('#chatDiv');
$chatText = $('#chatText');

$chatDivHtml = $chatDiv.val();
$chatTextHtml = $chatText.html();

function divClicked() {
    var divReplace = $("<div>").attr("id", "chatDiv").text($chatTextHtml);
    $chatText.replaceWith(divReplace);
    divReplace.click(editableTextBlurred);     
}

function editableTextBlurred() {
    console.log("clicked");
    var textReplace = $("<textarea />").attr("id", "chatText").val($chatDivHtml);
    $chatDiv.replaceWith(textReplace);
    $chatDiv.click(divClicked);
}

$(document).ready(function () {
    $chatText.click(divClicked);
});

Answer 1

http://jsfiddle.net/GeJkU/1060/

使用 .live() 为动态生成的元素附加事件，因为您使用的是 jquery 1.4 版本。对于更高版本，您需要使用 .on()

$('#chatText').click(divClicked);
$('#chatDiv').live('click', editableTextBlurred);

function divClicked() {
    var $chatText = $('#chatText'),
        $chatTextHtml = $chatText.val();
    var divReplace = $("<div>").attr("id", "chatDiv").text($chatTextHtml);
    $chatText.replaceWith(divReplace);
    $(divReplace).click(editableTextBlurred);
}

function editableTextBlurred() {
    var $chatDiv = $('#chatDiv'),
        $chatDivHtml = $chatDiv.text();
    console.log("clicked");
    var textReplace = $("<textarea />").attr("id", "chatText").val($chatDivHtml);
    $chatDiv.replaceWith(textReplace);
    $(textReplace).click(divClicked);
}