Question

我需要单击一个按钮并删除一个div，然后在其位置加载一个新的div。这两个div都包含一些html和一个脚本。

使用下面的remove / show方法，div1加载完美，但点击按钮后div2替换了div1，但只加载了div2中的html。 div2脚本由于某种原因未加载。

<div id="div1">div1 contents</div>
<div id="div2" style="display: none">div2 contents</div>
<button id="button">Button</button>

$('#button').on('click', function() {
    $('#div1').remove();
    $('#div2').show();
});

有没有办法删除div1，然后在其位置加载新的div2而不是取消隐藏div2？

Answer 1

尝试

var $origin = $('#div1'),
    replacementSrc = '/path/to/div2.html',
    replacementScriptsSrc = '/path/to/div2.js';

$('#button').on('click', function () {
    $.load(replacementSrc, function (html) {
        $origin.replaceWith(html);
        $.getScript(replacementScriptsSrc/*, function () { doSomething(); }*/);
    });
});

Answer 2

您可以尝试以下方式：

$('#button').on('click', function() {
    $('#div1').html('div 2 contents');
});

在此示例中，您不需要上面示例中的行。

Answer 3

试试此代码

$( document ).ready(function() {
      $('#button').on('click', function() {
            $('#div1').html($('#div2').html());
      });
});

问题在于您的脚本。实际上脚本已加载到div1但后来脚本抛出此错误

Uncaught ReferenceError: jwplayer is not defined

这将退出。因此，没有加载脚本。

Demo

Answer 4

你正在使用的是这样的事情!!

div{
height:100px;
width:100px;
margin:10px;
}

.b{
background:green;
}

.c{
display:none;
background:blue;
}

HTML

<div class="b">
<script>
$(document).ready(function(){
$('#button').click(function(){
$('.c').show();
$('.b').remove();
})  
});

</script>
</div>
<div class="c">
<script>
$(document).ready(function(){
$('.c').click(function(){
$(this).css('background','red');
})
});
</script>
</div>
<input type="button" id="button">

这对我有用。

我如何删除div并在其位置加载新的div？

4 个答案: