0

我的内容 (blog.php) 有一个 ajax 调用，它有 jquery nivo 滑块。但是滑块不会出现！我首先认为这是与灯箱或滑块的冲突，但如果没有 ajax 调用滑块，它可以很好地协同工作。我想我需要在 ajax 调用之后显式地使 jquery 工作。我尝试了 $(document).ajaxStop(function() 和 $(document).ready，但没有成功。（也许我做错了？）我的代码有问题： 

<script type="text/javascript" src="js/nivoslider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        var imgload = $('#imgload_txt'),
            imgshow = $('#imgshow_txt');
        $('#slider').nivoSlider({
          pauseOnHover: false,
          pauseTime: 6000,
          onImageLoad: function(img) {
            imgload.hide();
            imgload.text(img.data('src'));
            imgload.fadeIn();
          },
          onImageChange: function(img) {
            imgshow.hide();
            imgshow.text(img.data('src'));
            imgshow.fadeIn();
          }
        });
    });
</script>

和 ajax 内容调用（滑块在 blog.php 中）：

jQuery(document).ready(function($) {
     $('.blog').on('click', function() {
          var href = $(this).attr('href');
          if ($('#ajax').is(':visible')) {
               $('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
          }
          $('#ajax').css({ display:'block' }).animate({ height:'2000px' },function() {
               $('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none'}); 
               $('#ajax').load('blog.php ' + href, function() {
                    $('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#0e0e0e'});
               });
          });
     }).click();
});
4

3 回答 3

1

如果我认为这<div id="slider">也是通过.load()查询调用的新 HTML 的一部分是正确的，那么您需要修改您的.nivoSlider()调用，例如：

$(document).find('#slider').nivoSlider({
    //Options
});

下面我将您调整.load()为.ajax()，只是因为.load()在脚本执行方面有时有点有趣（请参阅文档）。此外，我已经将.nivoSlider()初始化放在了success: function() 回调中，所以等待的html 肯定会在那里。

主文件

<script type="text/javascript" src="js/nivoslider.js"></script>
<script>
jQuery(document).ready(function($) {

     $('.blog').on('click', function() {
          var href = $(this).attr('href');

          if ($('#ajax').is(':visible')) {
               $('#ajax').css({ display:'block' })
                         .animate({ height:'0' })
                         .empty();
          }

          $('#ajax').css({ display:'block' })
                    .animate({ height:'2000px' }, function() {

               $('#loader').css({ border:'none',  
                                  position:'relative', 
                                  top:'24px', 
                                  left:'48px', 
                                  boxShadow:'none'}); 

               $.ajax({
                   url: 'blog.php ' + href,
                   success: function( newHtml ) {
                       //Load the blog content
                       $('#content').html( newHtml );
                       $('#ajax').hide().fadeIn('slow');

                       var imgload = $(document).find('#imgload_txt'),
                           imgshow = $(document).find('#imgshow_txt');

                       $(document).find('#slider').nivoSlider({
                             //Options.
                       });
                   }
               });
          });
     });
});
</script>

博客.php

<h1>My Slider</h1>
<div id="slider">
    <img src="#" id="imgslider" /> 
</div>
<div id="imgload_txt">Some Text</div>
于 2013-10-18T08:01:11.967 回答
0

我用这个来停止和启动 nivoslider 也许它对你有用，我没有在你的代码中看到任何 ajax 调用但是在 ajax 成功之后你应该再次简单地 start() nivo-slider，

   //freeze .nivo-slices 
    jQuery('#slider').data('nivoslider').stop();
    //re-Init 
    setTimeout(function() {
            jQuery('#slider').data('nivoslider').start();
    }, 1850);
于 2013-10-18T07:58:39.597 回答
0

尝试将您的 nivoSlider 初始化函数移动到 $('#ajax').load 的回调函数。

而 blog.php 中的 $(window).load(function() 并不是你真正需要的。试试 .ready()

于 2013-10-18T08:01:56.377 回答