通过Ajax加载Flexslider

Question

I'm using the jQuery plugin easytabs to load HTML from another page. The HTML may consist of a jQuery flexslider, but the slider doesn't work after it has been loaded since the JavaScript already has been run. Here's my code:

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

I have tried calling the flexslider when I click on the Load via ajax link, like so:

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

...but that only works the second time when I click. I guess the flexslider script is being called before it has loaded the HTML via ajax. I have also tried calling the flexslider script from the external page (portfolio.html), but that doesn't work.

Any ideas?

Answer 1

Could you put it in your success callback of your easy tab ajax request? Append the following to your easytab event:

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

Found under event-hooks in the documentation:

RESPONSE TO NOT LOADING AFTER TAB CLICK