Jquery binding event after ajax loaded

Question

I want to bind click event on a page for a caroussel, when the page load dynamically with ajax for transitions between page. The problem is when i load the page, the two button-left and button-right work but when i navigate between page and come back to page with the caroussel, the two buttons don't work. And this for the all event. I'm looking for a solutions to bind event, even if the page is loaded dynamically.

Here is the code for example : (edit i try with the function method not working)

(function($) {
  $('nav').on('click', 'a', function(event) {
    event.preventDefault(event);
    var url = $(this).attr('href');
    if (url != window.location) {
      history.pushState({}, '', url);
      $('html, body').animate({scrollTop: 0}, 200, function() {
        loadPage(url);
      });
    }
    return false;
  });
  
  function caroussel() {
    var i = 0;
    $('.caroussel-logo').on('click', '.button-right', function() {
      
      if(i>-1200) {
        i = i-200;
        $('.logo-ref').animate({ "margin-left" : i+"px" },300);
      }
    });
    $('.caroussel-logo').on('click', '.button-left', function() {
      if(i<0) {
        i = i+200;
        $('.logo-ref').animate({ "margin-left" : i+"px" },300);
      }
    });
  }
  $(document).ready(function(){
    caroussel();
  });
  function test() {}
  var $main = $('#front-page');
  // Chargement et transition de page
  loadPage = function(page) {
    $.ajax({
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
          }
        }, false);
        // Download progress
        xhr.addEventListener("progress", function(evt) {
          
          
        }, false);
        return xhr;
      },
      async: true,
      type: 'GET',
      url: page,
      data: {},
      success: function(data) {
        
        var $top = $(data).find(".wrap-top").html();
        var $content = $(data).find(".the-content").html();
        $main.find('.wrap-top').hide("drop", {
          direction: 'left',
          duration: 400
        }, function() {
          $main.find('.wrap-top').fadeIn(200).html($top);
        });
        $main.find('.the-content').hide("fade", {
          duration: 800
        }, function() {
          $main.find('.the-content').fadeIn(200).html($content);
        });
        caroussel();
      }
    });
  };
})(jQuery);