Flexslider通过ajax加载

时间:2012-12-15 11:40:22

标签: jquery ajax flexslider

我正在使用jQuery插件easytabs从另一个页面加载HTML。 HTML可能包含一个jQuery flexslider,但是由于JavaScript已经运行,滑块在加载后不起作用。这是我的代码:

<ul class="portfolio-thumbnails">
    <li><a href="portfolio.html #item1" data-target="#item1">Load via ajax</a></li>
</ul>

<div class="panel-container">
    <div id="item1" class="portfolio-item"></div> /* The slider loaded from the ajax call will be appended to this div */
</div>

我单击“通过ajax加载”链接时尝试调用flexslider,如下所示:

$(".portfolio-thumbnails li a").click(function () { 
    $('.flexslider').flexslider({
        animation: "slide"
    });
});

...但这只在我点击时第二次有效。我想flexslider脚本在通过ajax加载HTML之前被调用。我也尝试从外部页面(portfolio.html)调用flexslider脚本,但这不起作用。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您可以将其放入简单标签ajax请求的success回调中吗? 将以下内容附加到easytab事件:

  .bind('easytabs:ajax:complete', function() {
    $('.flexslider').flexslider({
        animation: "slide"
    });
  });

在文档中的event-hooks下找到:

TAB CLICK后未加载的响应

enter image description here