Loading JavaScript into AJAX loaded content

Question

I am a newbie with AJAX and JavaScript and not sure how to make it work.

Here is the website:

When portfolio images are clicked, the details are loaded via AJAX. I would like to be able to do a slideshow for the work that has more than one full-sized image. However, because the content is loaded using AJAX, Flexslider's JavaScript doesn't work.

Here is the code that loads the content:

// ----------- PROJECT WINDOW SHOW/HIDE ----------- //

    var $actual= null;

    $(".ch-grid").click(function() {
            $.scrollTo( $('#project-show'), 800, {offset:-130});
            obre($(this).attr('id'));
            $actual=$(this);
//          alert($('.project-content').position().top)
//          $('html, body').animate({scrollTop:($('.project-content').position().top)+165}, 1000);
    });

    $(".portfolio-btn").click(function() {
            obert=false;
    });

    function obre(quin){
    $.ajax({

        //type: "POST",
        //data: { id: $(this).attr('cid')},
        url: quin,
        success: function(data) {
            $('.project-content').html(data);
        }
    });
}

And here are the scripts that need to be loaded:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=1.9.1"></script>
<script type="text/javascript" src="http://www.4ndesign.com/wp-content/themes/4ndesign/js/metronomy-plugins.js?ver=2.0"></script>
<script type="text/javascript" src="http://www.4ndesign.com/wp-content/themes/4ndesign/js/metronomy-custom.js?ver=2.2"></script>

Answer 1

You need to do your init of flexslider after the content is loaded via ajax. Just add it into the success part of your ajax request.

$.ajax({
  ..
  success: function(data) {
    $('#slider').flexslider(); // or what ever :)
  }
});