如何使內容更改後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腳本再次工作

回答

相關問題