Question

我正在尝试创建一个node.js应用来在两台机器之间传输代码。第一步是将代码粘贴到文本区域，然后按Enter键。按Enter键后，它将变为div或<pre>，代码突出显示。

我已经建立了通讯。让我难过的那部分是我如何将div变回textarea。

如果我在textarea外面点击它会变成一个div，这一切都很好，但是我不能让第二部分工作。

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);
}

Answer 2

一旦调用replaceWith，已识别的项目就不再在DOM中了。如果要附加点击事件，则需要使用您设置的其他选择器。

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

焦点上的Textarea变成了DIV，当点击div时它会回到textarea？ jQuery的

2 个答案: