通过ajax加载Flexslider

我使用jQuery插件easytabs从另一个页面加载HTML。 HTML可能由一个jQuery flexslider组成，但是由于JavaScript已经运行，所以滑块在加载之后不起作用。这里是我的代码：通过ajax加载Flexslider

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

我已经打过电话了flexslider当我通过AJAX链路负载点击，就像这样：

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

...但是，只能第二次，当我点击。我猜flexslider脚本在通过ajax加载HTML之前被调用。我也尝试从外部页面（portfolio.html）调用flexslider脚本，但这不起作用。

任何想法？

来源

2012-12-15 transbetacism

你可以把它放在你的easy标签ajax请求的success回调中吗？追加下面你easytab事件：

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

文档中event-hooks下找到：

响应于没有加载后选项卡中单击

enter image description here

来源

2012-12-15 11:51:39

的事情是，我不有这样的Ajax请求。我用的是easytabs jQuery插件，它看起来像这样： '$（ '＃投资组合标签'）easytabs（{ transitionIn： '了slideDown'， transitionOut： '效果基本show'，可折叠：真， updateHash：假 }）;' 所以我没有任何地方放置我的成功/完成代码。 – transbetacism

我更新了我的答案以适应简单标签。如果您仍然无法获取它，我们可能需要查看您的easytab事件调用。 –

谢谢蒂姆，工作！这是我的工作代码： $（'＃portfolio-tabs'）。easytabs（）; （'。portfolio-tabs'）。bind（'easytabs：ajax：complete'，function（）{（'。flexslider'）。flexslider（{ animation：“slide” }）; }） ; – transbetacism

通过ajax加载Flexslider

回答

相关问题