Flexslider通过ajax加载

Question

我正在使用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脚本，但这不起作用。

有什么想法吗？

Answer 1

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

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

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

TAB CLICK后未加载的响应