jQuery的滑塊不加載圖像第一次現場加載

Question

我使用jQuery load（）來顯示我的網站上的所有文件。我在index.html文件腳本看起來像這樣

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#main-wrap').load("home.html"); 

    $('#home').click(function() { 
     $('#main-wrap').load("home.html"); 
     return false; 
    }); 

    $('#wilgoc').click(function() { 
     $('#main-wrap').load("wilgoc.html"); 
     return false; 
    }); 
etc... 

在home.html的

$(document).ready(function() { 
//$(window).load(function() { 
    $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
return false; 
    }); 

默認nivoslider是（窗口）.load，但是當我打開Home.html中這是行不通的第二次...任何想法？謝謝。

Answer 1

該頁面已被動態加載（#slider是一個新的DOM元素），所以它不工作

$('#home').click(function(e) { 
    e.preventDefault(); 
    $('#main-wrap').load("home.html", function(){ 
     $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
    }); 
}); 

編輯：

從home.html的取出的document.ready並保持你的索引HTML文件中，並調用回調函數裏面的插件每次加載home.html的爲folows（您的index.html）

$(document).ready(function() { 

    $('#main-wrap').load("home.html", function(){ 
     $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
    }); 

    $('#home').click(function(e) { 
     e.preventDefault(); 
     $('#main-wrap').load("home.html", function(){ 
      $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
     }); 
    }); 
    ... 
    ... 
}); 

確保您不加載另一個完整的HTML文件（與HTML。頭e.t.c標籤）在你的div。

你可以試試這個（替換每行）：

setTimeout(function(){ 
    $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
}, 1000);