jQuery caching issue ajax?

Question

Done a little work and I think I've found the answer...jQuery's live function.

But it leads to an issue. What I want to do is refresh the content of a div with id of container with new content. The original content had jQuery calls, so when the new content is loaded, I want it to be able to be called by jQuery as well (if that makes sense). Which is where I read jQuery's old .live function worked (by attaching stuff on page load and all times in the future until a true page refresh).

My jQuery is as follows:

        $(document).ready(function() {
            $('.fancybox').fancybox({
                width       : '1000px',
                height      : '1000px',
                afterShow   : function() {
                    $( ".fancybox-wrap" ).draggable();
                    }
            }); 


var sourceSwap = function () {
    var newSource = $(this).data('alt-src');
    $(this).data('alt-src', $(this).attr('src'));
    $(this).attr('src', newSource);
}
$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});
    var originalContent = $('.player').html();
    var originalContent2 = $('.coords').html();
$('img.xyz').hover(function() {
var player = $(this).data('player');
var coords = $(this).data('coords');
     $('.player').html('<strong>'+ player +'</strong>');
     $('.coords').html('<strong>'+ coords +'</strong>');
}, function() {
     $('.player').html(originalContent);
     $('.coords').html(originalContent2);
});
 });
var centerX = <?=$_GET['x']?>;
var centerY = <?=$_GET['y']?>;

$(function(){
var hor = 0;
var vert = 0;
$('#left').click(function () {
    scroll = $('#container').scrollLeft();
    $('#container').animate({'scrollLeft': scroll-300},1000);
    centerX = centerX - 5;
    hor--;
    if(hor <= -3){mapRefresh();}
});
$('#right').click(function () {
    scroll = $('#container').scrollLeft();
    $('#container').animate({'scrollLeft': scroll+300},1000);
    centerX = centerX + 5;
    hor++;
    if(hor >= 3){mapRefresh();}
});
$('#up').click(function () {
    scroll = $('#container').scrollTop();
    $('#container').animate({'scrollTop': scroll-300},1000);
    centerY = centerY - 5;
    vert++;
    console.log(vert, " vert");
    if(vert >= 3){mapRefresh();}
});
$('#down').click(function () {
    scroll = $('#container').scrollTop();
    $('#container').animate({'scrollTop': scroll+300},1000);
    centerY = centerY + 5;
    vert--;
    if(vert <= -3){mapRefresh();}
});
<? $totalHeight = 60 * 42;
$totalWidth = 60 * 42;?>
$('#container').scrollTop((<?=$totalHeight?>-$('#container').height())/2).scrollLeft((<?=$totalWidth?>-$('#container').width())/2);
});


function mapRefresh() {
    $.ajax({
       type     : "POST",
       cache    : false,
       url      : "map2.php?map=refresh",
       data     : {'X': centerX, 'Y': centerY},
       success  : function(data) {
                    $("#container").html(data); 
                  }
      });

}

The stuff like $('#down').click(function () { I believe is simple to replace to $('#down').on( "click", function() {, but what of var sourceSwap = function () { or $(function () {? Those aren't "clicks" or "scrolls" or anything...those are just there, and need to be called on load, and then what of $('.fancybox').fancybox({?

I am new to javascript/jQuery and confused. I've figured the above out, but the only thing I can think of doing is including all the jQuery in the div id container, and replacing it with an exact copy of itself so that it re-runs, but then that seems to cache both the original running and the second running of the jQuery, so that it will run two ajax requests simultaneously, and then three at once, and then four at once, etc. the more times up/down/left/right are clicked.