jquery - 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

你能把它放在你success的简单标签 ajax 请求的回调中吗？将以下内容附加到您的 easytab 事件中：

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

在文档中的事件挂钩下找到：

点击标签后不加载的响应