Question

我有一个页面，您可以在其中选择2张图片，当您点击其中一张图片时，div的内容会发生变化。新内容还有2张图片，点击后会加载其他内容。我使用的是javascript，但脚本只加载一次，所以当我到达第二个内容时，它不会再改变了。

我有3个文件：

Main.html - content1.html - content2.html - script.js

main.html中：

<div id="change">
    <div id="rightside">            
        <img src="img.jpg" class="class1" id="water" alt="right choice">
    </div>
    <div id="leftside">
        <img src="img2.jpg" class="class1" id="water2" alt="left choice">
    </div>
</div>
<script type="text/javascript" src="../js/script.js"></script>

以下是将在类更改中替换的内容： content1.html：

<div id="rightside">            
  <img src="img3.jpg" class="class1" id="water3" alt="right choice">
</div>

<div id="leftside">
    <img src="img4.jpg" class="class1" id="water4" alt="left choice">
</div>

这是我想在下次点击时替换的内容： content2.html：

<div id="rightside">            
  <img src="img5.jpg" class="class1" id="water5" alt="right choice">
</div>

<div id="leftside">
    <img src="img6.jpg" class="class1" id="water6" alt="left choice">
</div>

这是假设这样做的脚本：

window.onload = function() {

    document.getElementById("water").onclick = function() 
    {
        $('#change').load('content1.html');

    };

    document.getElementById("water3").onclick = function() {
        $('#change').load('content2.html');

    };

如果我点击带有水的图像，它会替换为content1，然后我点击带有水的图像3，没有任何反应

Answer 1

您可以使用完整的回调来绑定新元素：

window.onload = function() {

    document.getElementById("water").onclick = function() 
    {
        $('#change').load('content1.html', function() {
             document.getElementById("water3").onclick = function() {
                $('#change').load('content2.html');

            };
        });

    };
 };

参考：http://api.jquery.com/load/

如何在内容更改后再次使onload脚本工作

1 个答案: