通过Ajax加载Flexslider

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?

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