WordPress: Load JavaScript / JQuery after dynamic page content loads in div

Question

I'm trying to create a one-page WordPress based site with page content being loaded into a div onClick. However, since the JavaScript has already been loaded well before the page content is loaded, the scripts don't work.

The temp site is here: http://upsilon.lunariffic.com/~swstr0/

If you click on CLIENTS-->Who We Work With you'll see the problem. A logo slider that doesn't slide. No arrows, and depending on the browser, the links don't work.

Probably because this script already loaded? http://upsilon.lunariffic.com/~swstr0/wp-content/plugins/logo-slider/jquery.cycle.all.min.js?ver=3.9.1

Here's the code I'm currently using to get the div to slide down (or up) and load page content:

<script type="text/javascript">
jQuery(function($) {
$("li.btn-slide a").on('click', function(e){
    e.preventDefault();

    var post_url = $(this).attr("href");
    var post_id  = $(this).attr("rel");

    $("#page-con").html("loading...")
                  .load(post_url, function() { // content loaded callback

        var pageconHeight = $("#page-con").height();  // Find the height of the content inside #panel
         $("#panel").animate({height: pageconHeight}, "slow"); // Animate the height of #panel

    });
});

});

Answer 1

When you run the slider script, it applies the slider effect to the existing elements. If you put new content in your page, you need to reapply the script.

After this line:

$("#panel").animate({height: pageconHeight}, "slow"); // Animate the height of #panel

Add

$('#idOfYourLoadedContent').cycle();