Load a tpl file via Ajax (Drupal 7)

Question

I'm using Drupal 7 and I'm trying to load an ajax tpl file.

I have a page that contains several thumbnails of photos and when I click on a photo it must appear in the foreground (with information and features in PHP)

All pages of the site load js and css files generically.

So I decided to create a hook_menu then in the callback function return a theme via a hook_theme and finally I use ajax to display it. (see my post: Drupal 7 - get variables from hook_theme)

1. Here's my tpl for a thumbnail:

<div class="thisPhoto">
    <a href="javascript:;">
        <img src='<?php print image_style_url("pict_small", $content["field_photo"]); ?>'
            data-nid = <?php print $content['nid'] ?>
            data-logged-in = <?php print $logged_in ?> />
    </a>
</div>

2. Here is my method in JS

$("#photos-block").on('click', ".thisPhoto", function(e) {
    var nid = $(this).find("img").attr("data-nid");
    var logged_in = $(this).find("img").attr("data-logged-in");

    $("#main-content").load("http://example.org/example/fancybox-photos/"+nid+"/"+logged_in, function(responseTxt, statusTxt, xhr) {
        if(statusTxt == "success")
            console.log("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

When I click for the first time all my JS files are loaded in ajax and my tpl too but the problem is that at the second click my tpl is loaded at once but all these script files are loaded twice and then at the third three times etc....

I don't understand why it does that.

If anyone has an idea?