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 下找到：

点击标签后不加载的响应