加載jQuery的HTML變更後

我在「主體」的標籤，這些HTML代碼：加載jQuery的HTML變更後

<body> 
    <center> 
     Hello!<br /> 
     <textarea cols="65" rows="10" id="code"></textarea> 
    </center> 
</body>

而且我希望把所有的在上面textarea的我的網頁代碼與此代碼jQuery中：

$("textarea#code").val($('body').html());

好了，現在我希望讓用戶更改「體」的HTML在「文本區域」使用這樣的：

$("textarea#code").change(function(){ 
    $('body').html($(this).val()); 

    $("textarea#code").val($('body').html()); 
});

第一個改變人後l事情沒有問題，HTML成功更改，但之後用戶無法再次更改HTML！換句話說，JavaScript沒有加載。

This is my codes in Fiddle

來源

2014-11-16 Arman

這不是JavaScript的沒有加載，它是你遇到了一個無限循環。你更新'change'事件中'textarea'的值，它重新觸發'change'事件，並重復。 –

你是否考慮接受答案？ –

HTML在你的身體是動態變化的。你必須使用，

$(document).on('change','textarea#code',function(){ 
    $('body').html($(this).val()); 
    $("textarea#code").val($('body').html()); 
});

代替

$("textarea#code").change(function(){ 
    $('body').html($(this).val()); 

    $("textarea#code").val($('body').html()); 
});

JSFIDDLE DEMO

來源

2014-11-16 08:32:47

html方法，二傳手是破壞性，即它通過解析傳遞的值，併產生新替換所有內容元素。事件處理程序綁定到元素，每個DOM對象都是唯一的。在使用html方法後，舊元素將被刪除，所以附加到它們的事件處理程序將不再起作用。在這種情況下，您應該使用事件委派。

這就是說在這裏使用textatea來修改整個頁面的HTML內容並沒有多大意義。如果您想動態編輯頁面，則可以使用WYSIWYG編輯器或contentEditable屬性。

來源

2014-11-16 08:32:59 undefined

您需要代表團：

$("textarea#code").val($('body').html()); 
$(document).change("textarea#code", function (e) { 
    $('body').html($(e.target).val()); 
    $("textarea#code").val($('body').html()); 
});

JSFIDDLE

What delegation means?

來源

2014-11-16 08:33:31

加載jQuery的HTML變更後

回答

相關問題