jquery加載後Javascript無法正常工作

Question

我正在爲客戶設計一個網站，對他來說一件大事（不要問我爲什麼）要讓音樂播放整個過程，切換頁面應該繼續歌曲而不是重播它。我用jQuery的負載每一頁基本上加載到我的index.html示例頁面加載的

的內容區域

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#maincontent").load("home.html"); 
    }); 
</script> 

頁換

<script type="text/javascript"> 
    function pageChanger(page){ 
     $("#maincontent").load(); 
     window.scrollTo(0, 0); 
    } 
</script> 

正如你所看到的在http://file.gflam.com/MothersDayStore它運作良好，因爲它應該。我的問題是，雖然我有此腳本加載在頭

<script type="text/javascript" src="js/jquery.carouFredSel-6.0.2.js"></script> 

它運行在您第一次去的網站，你會在底部滾動看到的產品，但是，如果你離開頁面，然後回去到主頁他們不再在幻燈片放映中。這與我從頭文件中刪除jquery.carouFredSel-6.0.2.js腳本的行爲相同。我的猜測（我還不是很好，因爲它仍然在學習）是因爲它在頭部它只加載頁面加載，所以當jquery加載頁面內容時，它不再運行？

任何幫助保持幻燈片放映或重新加載該腳本將不勝感激。如果您需要更多的代碼或更多的解釋，請留下評論，因爲我希望我很清楚

Answer 1

您會在home.html文件中看到此代碼。將它包裝在一個函數中。在頁面加載後立即調用它。然後在你的各種頁面加載。函數pageChanger（page），測試'home.html'，如果是的話 - 然後調用函數。翼。

$(window).load(function(){ 
    function initializeCarousel(){ 
    $('#foo4').carouFredSel({ 
     responsive: true, 
     auto: { 
      timeoutDuration : 4000,  // 5 * auto.duration 
     }, 
     width: '100%', 
     scroll: { 
      items : 4,  // 5 * auto.duration 
      pauseOnHover : true,  // scroll.pauseOnHover 
     }, 
     prev: '#prev2', 
     next: '#next2', 
     pagination: "#pager2", 
     items: { 
      width: 250, 
      height: 'auto', // optionally resize item-height 
      visible: { 
       min: 4, 
       max: 4 
      } 
     } 
    }) 
    } 
initializeCarousel(); 
}); 




function pageChanger(page){ 
    $("#maincontent").load(page); 
    window.scrollTo(0, 0); 
    if(page == 'home.html'){ 
     initializeCarousel(); 
    } 
} 

我相信有一個更簡潔的處理方法。但是，您正在加載.html的事實，您已在初始頁面加載時重新初始化它。當你回到'home.html'時，你已經完成了初始化。你必須重新初始化它。