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

我有一个页面，您可以在2张图片之间进行选择，当您点击其中一个图片时，div的内容会发生变化。新内容还有2张图片，点击后会加载另一个内容。我使用JavaScript，但该脚本只加载一次，所以当我到达第二个内容时，它不再改变。如何使内容更改后onload脚本再次工作

我有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为水图像，它与内容1代替，然后我点击与water3的图像，没有任何反应

来源

2017-06-19 KidsPersonalTv

问题是，在onload中，不存在'document.getElementById（“water3”）'。 – hardkoded

使用[**委托事件**]（https://www.google.com/search?q=js+delegated+event&oq=js+delegated+event&aqs=chrome..69i57j0l4.2607j0j7&sourceid=chrome&ie=UTF-8 ）。这种方法将一个事件处理程序附加到始终在页面上的元素，等待事件从动态内容中冒出来，检查事件的目标并在处理程序匹配选定的条件时触发处理程序。虽然看起来好像刚刚更新了“”元素的“src”，而不是替换“＃change”的所有内容。 – hungerstar

是否有一个明确的规则，将被点击图片的ID与新内容的网址相关联。如果是这样，整个事情就是微不足道的。 –

您可以使用完整的呼叫切换到新的元素绑定：

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/

来源

2017-06-19 17:17:41 hardkoded

不错，但不起作用，当我得到第二组图像时，内容不会改变，当我点击water3（例如） – KidsPersonalTv

@KidsPersonalTv我加载了一个本地网络服务器，它的工作原理，你正在加载它来自网络服务器（http）？如果没有，你应该得到一个CORS错误 – hardkoded

有没有一种方法可以让我给你一个完整的例子，我得到了什么？ – KidsPersonalTv

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

回答

相关问题