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

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');

    };

如果我点击 id water 的图片，它会替换为 content1，然后我点击 water3 的图片，没有任何反应

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/