Nivo Slider - 如何在 AJAX 内容加载后调用滑块答案

【问题标题】：Nivo Slider - how to call slider after AJAX content loadNivo Slider - 如何在 AJAX 内容加载后调用滑块
【发布时间】：2012-03-29 12:20:18
【问题描述】：

我的代码：

<script type="text/javascript">
 jQuery(window).load(function() {
  jQuery('#slider02').nivoSlider({
   controlNav: true,
   effect: 'boxRainGrow',
   animSpeed: 1500,
   pauseTime: 8000  
  });
 });
</script>

<div class="slider-wrapper theme-default">
 <div id="slider02" class="nivoSlider">     
  <span id="zone933">
   <script type="text/javascript">
    jQuery('#zone933').load('/content.phtml);
   </script>
  </span>
 </div>
</div>

如何让 Nivo Slider 等到加载 ajax 内容？因为，有时它有时会起作用。它取决于浏览器的刷新。第一次访问页面不显示滑块，刷新和ajax内容加载后，显示正常。

所以我需要做一些事情，比如等到 ajax 请求完成后再调用 Slider。我试图添加： jQuery(document).ajaxComplete(function{ "here my code" });

但它不起作用。我将它与 PHP 函数一起使用，所以我在 PHP 函数中调用了滑块所以该函数正在调用滑块的jQuery代码和html代码以及参数 of function 是元素 id 的名称，例如“zone933”。 PHP 工作正常；如果我使用简单的图像或带有链接的图像，它就完美了。我只有使用ajax加载才能正常工作。

【问题讨论】：

标签： ajax jquery slider nivo-slider

【解决方案1】：

试试这样的：

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#zone933').load('/content.phtml', function () {
        jQuery('#slider02').nivoSlider({
            controlNav: true,
            effect: 'boxRainGrow',
            animSpeed: 1500,
            pauseTime: 8000  
        });
    });
});
</script>

<div class="slider-wrapper theme-default">
 <div id="slider02" class="nivoSlider">     
  <span id="zone933">
  </span>
 </div>
</div>

【讨论】：