焦點上的Textarea成爲DIV，當該div被點擊時，它會返回到textarea？ jquery

我想創建一個node.js應用程序來在兩臺機器之間傳輸代碼。第一步是將代碼粘貼到文本區域，然後按Enter鍵。按下輸入鍵後，它會變成一個div或帶有代碼高亮顯示的<pre>。焦點上的Textarea成爲DIV，當該div被點擊時，它會返回到textarea？ jquery

我已經建立了溝通。讓我難住的部分是我如何將div轉回textarea。

如果我點擊textarea之外，它會變成一個div，這是一切都很好，但我不能得到第二部分的工作。

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

HTML

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

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

來源

2014-01-21 eveo

你永遠不更新新的內容變量... $ chatDivHtml和$ chatTextHtml加載時總是有初始值。 – epascarello

是的，我知道，但它甚至沒有取代原來的元素，也沒有想到價值。 – eveo

這是因爲您沒有將點擊附加到正確的元素。 – epascarello

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

來源

2014-01-21 15:48:05 Krishna

啊真棒男人謝謝。我得到了這個：http://jsfiddle.net/GeJkU/1061/ – eveo

@eveo - 沒問題。請提出所有有用的答案並接受一個答案。 – Krishna

謝謝你提醒我，完成了。 – eveo

一旦你調用replaceWith所確定的項目不再在DOM。如果你想附加你的點擊事件，你需要使用你設置的其他選擇器。

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

來源

2014-01-21 15:33:29 Carth

焦點上的Textarea成爲DIV，當該div被點擊時，它會返回到textarea？ jquery

回答

相關問題