有人可以向我解释为什么这行不通吗？ HTML上的Ajax加载+脚本

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

看看这个答案 。 如它所说：

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

也许你可以不喜欢这样 。 代替使用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>