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);