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

Question

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

我有 3 个文件:

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

主.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，然后我点击id为water3的图片，没有任何反应

Answer 1

您可以使用完整的回调来绑定(bind)新元素:

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/