Question

在ajax加载html内容后，脚本不会加载，为什么这只是步骤不起作用。这是我得到的：

MakoStart.html :(将改变的主页）

<div class="makoislandintro" id="makochange">   
    <div class="makochoicesfirst">
        <img src="../img/makoislandspecial/makobeach.jpg" class="makoislandbeach" id="makoislandbeach" alt="current">
        <br>
    </div>
</div>
<script>
    document.getElementById("makoislandbeach").onclick = function() {
       $('#makochange').load('makoisland.html');
    };  
</script>

当我点击带有id：makoislandbeach的图片时，内容会更改为makoisland.html中的内容。

以下是makoisland.html中的内容：

<div class="makochoices">
    <div id="rightside">            
        <img src="../img/makoislandspecial/waterstream.jpg" class="makoislandchoice" id="waterstream" alt="right choice">
    </div>
    <div id="leftside">
        <img src="../img/makoislandspecial/islandside.jpg" class="makoislandchoice" id="islandside" alt="left choice">
    </div>
</div>
<script>
    document.getElementById("waterstream").onclick = function() {
       $('#makochange').load('waterstream.html');
    };
    document.getElementById("islandside").onclick = function() {
       $('#makochange').load('islandside.html');
    };  
</script>

内容更改后，当我单击已替换旧内容的2个新图像时，脚本不会执行。我创建了一个waterstream.html，它与makoisland.html相同，但是有不同的图像，但是在第一次转换后脚本将不起作用。

Answer 1

看看这个answer。正如它所说：

使用不带后缀选择器表达式的URL调用.load（）时，在删除脚本之前将内容传递给.html（）。这将在丢弃之前执行脚本块。但是，如果使用附加到URL的选择器表达式调用.load（），则在更新DOM之前会删除脚本，因此不会执行脚本。

也许你可以做this之类的事情。不使用 load ，而是使用 ajax 。它略有不同。

<div class="makoislandintro" id="makochange">   
    <div class="makochoicesfirst">
        <img src="../img/makoislandspecial/makobeach.jpg" class="makoislandbeach" id="makoislandbeach" alt="current">
        <br>
    </div>
</div>
<script>
    document.getElementById("makoislandbeach").onclick = function() {
        $.ajax({
            url: "makoisland.html",
            context: document.body,
            success: function(responseText) {
                $("#makoislandbeach").html(responseText);
                $("#makoislandbeach").find("script").each(function(i) {
                    eval($(this).text());
                });
            }
        });
    };
</script>

有人可以向我解释为什么这不起作用？在HTML上的Ajax Load +脚本

1 个答案: