Question

我在＆＃39; body＆＃39;中有这些HTML代码。标记：

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

我想在jQuery中使用此代码将所有页面代码放在textarea上面：

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

好的，现在我想让用户更改＆＃39; body＆＃39;的HTML在那＆＃39; textarea＆＃39;用这个：

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

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

首次更改后，所有内容都正常，HTML更改成功，但执行此操作后，用户无法再次更改HTML！换句话说，JavaScript没有加载。

This is my codes in Fiddle

Answer 1

您需要委托：

$("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?

Answer 2

作为setter的

html方法是 destructive ，即它通过解析传递的值并生成 new 元素来替换所有内容。事件处理程序绑定到元素，每个DOM对象都是唯一的。使用html方法后，旧元素将被删除，因此附加到它们的事件处理程序将不再起作用。在这种情况下，您应该使用事件委托。

据说在这里使用textatea来修改整个页面的HTML内容并没有多大意义。如果要动态编辑页面，可以使用WYSIWYG编辑器或contentEditable属性。

Answer 3

您身体中的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

HTML更改后加载jQuery

3 个答案: