jQuery.html（） - JavaScript代碼已執行但消失

我正在開發一個小編輯器以將小部件（HTML，CSS和Javascript）添加到網站。jQuery.html（） - JavaScript代碼已執行但消失

用戶在字段中鍵入小部件代碼。
驗證時，窗口小部件的代碼被添加到頁面中。
用戶可以編輯代碼（從DOM中檢索）。

除了我有一個問題來檢索JavaScript代碼。事實上，它執行得很好，但從DOM中消失。有什麼東西可以逃脫我！

我簡化我的問題就在這裏： HTML代碼：

<textarea id="code"> 
    &lt;script type=&quot;text/javascript&quot;&gt;alert(&quot;code&quot;);&lt;/script&gt; 
</textarea> 
<div id="target"></div>

Javascript代碼：

$("#target").html($("#code").val()); 
alert($("#target").html());

試試看：http://jsfiddle.net/8uhB8/3/

這個例子插入JavaScript代碼（一個簡單的JavaScript警報）並嘗試檢索它。

你有什麼想法嗎？

謝謝！

來源

2013-05-12 tadaa9

這是舊的，但你找到一個解決方案？我也有同樣的問題。謝謝 – cripox 2014-11-07 18:16:14

我在我的案例中發現了這個問題，可能與您的案例不一樣：當單擊表單提交按鈕時，js代碼會被執行，因此在js代碼運行後，頁面會很快刷新。 – cripox 2014-11-07 18:22:06

$("#target").html($("#code").html()); 
alert($("#target").html());

Fiddle.

由於您使用的HTML字符，你需要在這種情況下使用.html()。

來源

2013-05-12 10:07:42

如果你比較你的「小提琴」和我的，你會看到有一個重要的區別：JavaScript代碼被寫在頁面上，而不是執行。這不是預期的結果。 – tadaa9 2013-05-12 11:20:16

這就是.html()的工作原理。它將.innerHTML分配給HTML的所有結構部分。但是分配innerHTML不會執行腳本。所以jQuery將所有腳本從HTML中提取出來，並將它們放在<script>節點中執行它們。此節點只是臨時的，並在.html()完成時刪除。但腳本仍然執行。

來源

2013-05-12 10:14:43 Barmar

有趣的答案！你認爲通過更改我的代碼可以實現預期的結果嗎？你有什麼想法？ – tadaa9 2013-05-12 11:24:19

不要嘗試從DOM中檢索代碼。使用'.text（）'將代碼放在textarea中，使用'.html（）'把它放到DOM中。 – Barmar 2013-05-12 11:27:34

這是一個很好的解決方案，但它不適用於我的問題。事實上，在我的在線網頁編輯器中，textarea是即時創建的，用於編輯代碼然後銷燬。在同一頁面上可能有多個小部件。我開始認爲我想做什麼是不可能的？ – tadaa9 2013-05-12 11:38:42

jQuery.html（） - JavaScript代碼已執行但消失

回答

相關問題