Не могу разобраться в порядке запуска функций

Доброго времени суток. Подскажите новичку почему в данном коде функции Drag() и Info () начинают работать только после исполнения события $(".createTask").click(function (e){...

    $(document).ready(function () {
    //Получение ответа от сервера
    function loadJson(nameJsonFile) {
        var nameJsonFile = nameJsonFile;
        var dataResult = null;
        $.getJSON('json/' + nameJsonFile + '.json', function (result) {
            dataResult = result;
            //нужно вынести загрузку шаблона отдельно а сам его вывод отдельно
            var source = $("#templateExecutor").html();
            var template = Handlebars.compile(source, {noEscape: true});
            var html = template(dataResult);
            $(".bodyTable").html(html);
            // console.log(dataResult);
            //и отдельно загружать шаблон из файла и json и компилировать в блок с классом который будет получен ИЗ JSONа
            var source = $("#templateTask").html();
            var template = Handlebars.compile(source, {noEscape: true});
            var html = template(dataResult);
            // тут должен быть выбор места вставки изходя из данных в JSONе
            var paste = 'open';
            $('#1 .bodyExecutor .'+paste+' ').html(html);
        });
    };

    // Перетаскивание
    function Drag () {
    $(".sideMark").draggable({
        helper: function (e) {
            var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable");
            return original.clone().css({
                width: original.width() 
            });
        },
        revert: "invalid",
        containment: ".grid-container",
        opacity: 0.7
    });
    $('.background').on().droppable({
        accept: ".sideMark",
        drop: function (Task, ui) {
            var clone = ui.draggable.detach();
            $(this).append(clone);
        }
    });
    }
    Drag();
    //Получение данных о задаче 
    function Info () {
    $(".wrapperTask, .wrapperTaskOff").click(function (e) {
        ind = $(this).attr("id");
        $('.rightColum').load('ajax/id' + ind + 'task.html');
        $('.asideRight').css({'display': 'block'});
    });
    $(".close").click(function (e) {
        $('.asideRight').hide();
    });
    };
    Info ();
    //Сортировка по версиям
    $(".titleMenuVer").click(function (e) {
        var tasks_y = $('[version]');
        $(tasks_y).show();
        $(".titleMenuVer").removeClass("activeButton");
        var versionButton = $(this).attr("versionButtonStatus");
        $(this).addClass("activeButton");
        var tasks_v = $('[version = ' + versionButton + ' ]');
        $(tasks_v).hide();
    });
     Drag ();

     //Кнопка добавление задачи
    $('.popup .close_window, .overlay').click(function () {
        $('.popup, .overlay').css({'opacity': 0, 'visibility': 'hidden'});
    });
    $('.open_window').click(function (e) {
        $('.popup, .overlay').css({'opacity': 1, 'visibility': 'visible'});
        e.preventDefault();
    });
     //Добавление задачи
     $(".createTask").click(function (e){
        var titleTask = document.forms["data"].titleTask.value;
        var bodyTask = document.forms["data"].bodyTask.value;
        var prioTask = document.forms["data"].prioTask.value;
        var executorTask = document.forms["data"].executorTask.value;
        var numberTask = document.forms["data"].numberTask.value;
        var statusTask = document.forms["data"].statusTask.value;
        var idTask = 1;
        switch (prioTask) {
        case 'Высокий':
          prioTask = 'redarrowpoint';
          break;
        case 'Средний':
          prioTask = 'redarrow';
          break;
        case 'Низкий':
          prioTask = 'greenarrow';
          break;
        default:
          alert( 'Приоритет: "Высокий" , "Средний" , "Низкий". ' );
        };
         $("#1 .bodyExecutor .clarification").append(
                '<div id="'+idTask+'" class="wrapperTask sideMark blue" version="1" tabindex="1">\n\
                <div class="grid-container-Task">\n\
                    <div class="iconTask"><img src="img/icon/arrow.png" alt=""/></div>\n\
                    <div class="numberTask">'+numberTask+'</div>\n\
                    <div class="iconExecutorTask"><img src="img/avatar/1.jpg" alt=""/></div>\n\
                    <div class="arrowTask"><img src="img/icon/'+prioTask+'.png" alt=""/></div>\n\
                    <div class="titleTask">'+titleTask+'<br><br>\n\
                        <div class="bodyTask">'+bodyTask+'</div>\n\
                    </div>\n\
                </div>\n\
                </div>'
         );
        Drag ();
        Info ();
        $('.popup, .overlay').css({'opacity': 0, 'visibility': 'hidden'});
    });
loadJson('data');
Info ();
Drag ();
});

Они ведь объявлены и запущены раньше. (Конкретно в этой функции они добавлены в конце что бы работать на вновь созданных элементах, но с изменением кода они перестали работать по умолчанию на уже созданных объектах). Спасибо большое.

Я предполагаю это это подобная ошибка. Просвятите пожалуйста почему код:

function loadJsonTasks(nameJsonFile, idpast) {
var nameJsonFile = nameJsonFile;
var idpast = idpast;
var dataResult = null;
$.getJSON('json/' + nameJsonFile + '.json', function (result) {
    dataResult = result;
    //нужно вынести загрузку шаблона отдельно а сам его вывод отдельно
    var source = $("#templateTask").html();
    var template = Handlebars.compile(source, {noEscape: true});
    var html = template(dataResult);
    $('#'+idpast+' .bodyExecutor .open').html(html);
});
 };
 loadJsonTasks('executor2', 2);
loadJsonTasks('executor1', 1);
loadJsonTasks('executor3', 3);

Выполняется идеально но если поменять местами loadJsonTasks('executor1', 1); и loadJsonTasks('executor2', 2); то второе выражение проскакивает и не выполняется

   function loadJsonTasks(nameJsonFile, idpast) {
var nameJsonFile = nameJsonFile;
var idpast = idpast;
var dataResult = null;
$.getJSON('json/' + nameJsonFile + '.json', function (result) {
    dataResult = result;
    //нужно вынести загрузку шаблона отдельно а сам его вывод отдельно
    var source = $("#templateTask").html();
    var template = Handlebars.compile(source, {noEscape: true});
    var html = template(dataResult);
    $('#'+idpast+' .bodyExecutor .open').html(html);
});
 };
loadJsonTasks('executor1', 1);
loadJsonTasks('executor2', 2);
loadJsonTasks('executor3', 3);

Последний код отказывается показывать loadJsonTasks('executor2', 2);