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的默认值是（window）.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时调用回调函数中的插件（如下所示）（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});
        });
    });
    ...
    ...
});

确保您没有在div中加载另一个完整的html文件（带有html。head e.t.c标记）。

你可以尝试这个（替换每一行）：

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

第一次加载网站时，jQuery滑块不会加载图像

1 个答案: