почему не срабатывает событие в HTML?

Столкнулась с очень интересной проблемой. В работе мы используем web.py для серверной части и чистый JS в перемешку с jQ. Суть проблемы следующая. Пока не было необходимости в динамическом рендеринге шаблона, был следующий код

<div class="actual-tasks">
    $if events:
        $for event in events:
            <div class="t$event.id">
                <div class="event-text $event.status">
                    <a alt="Редактировать"
                      title="Редактировать" href="/editevent/$event.id">
                      <i class="edit icon"></i>
                    </a>
                    $event.text
                </div>
                <div class="event-details">
                    $if event.details:
                        <i class="info icon"></i>$event.details
                </div>
                <div class="event-time">
                    <i class="wait icon"></i>
                    $event.start.time() - $event.end.time()
                     <a class="close-task"
                         eventid="$event.id"
                         alt="Отметить как выполненное"
                         title="Отметить как выполненное"
                         href="#">
                         <i class="checkmark box icon"></i>
                     </a>
                </div>
                <hr>
            </div>
    $else:
        Актуальных задач нет</br>
    <!--*данный модуль отображает дела на текущие сутки-->
</div>

Когда встала задача динамического рендеринга, решила проблему "дедовским" методом, для переносимости между поддерживающих HTML5 платформ.

function getAndRenderTasks(){
$.getJSON("/tasks/api/v1.0/tasks",  function (data) {
//Добавить проверку на наличие данных в data
var tasks = [] // Место хранения всех задач
for (var i = 0; i < data.length; i++) { // хеши задачи
    var taskData = [] // Данные одной задачи    
    $.each(data[i], function(key, val){ // достаем данные из хеша
        taskData.push( "<div class='"+key+"'>"+val+"</div>") // ложим добытые значения в массив таска
    })
    console.log(taskData)
    var $taskRaw = $("<div>"+taskData.join('')+"</div>") // создаем переменную для сырых хтмл данных
    var taskId = $taskRaw.find('.id').text() // дополучаем ID таска
    var status = $taskRaw.find('.status').text() // получаем статуст таска
    var start = $taskRaw.find('.start').text()
    var end = $taskRaw.find('.start').text()
    var $task = $("<div class='t"+taskId+"'></div>") // Создаем переменную для отредактированных данных задачи
    // СОБИРАЕМ ЗАДАЧУ ИЗ СЫРЫХ ДАННЫХ
    $($taskRaw).find(".event-text").clone().appendTo($task) //Клонирум блок с описанием задачи и добавляем в "рабочий" блок задачи 
    if($($taskRaw).find(".status").text() != 'null'){
        $($task).find('.event-text').addClass(status) // прикручиваем статус выполнения задачи
    }
    if($($taskRaw).find(".event-details").text() != 'null'){
        $($taskRaw).find(".event-details").clone().appendTo($task)  
    }
    $("<div class='event-time'>"+ start + " - " + end + "</div>").appendTo($task)
    $('<hr>').appendTo($task)
    // А ТЕПЕРЬ УКРАШАЕМ ДАННЫЕ :)
    $($task).find(".event-text").prepend("<a class='task-edit' alt='Edit' title='Edit' href='/editevent/"+taskId+"'><i class='edit icon'></i></a>")
    $($task).find(".event-time").prepend("<i class='wait icon'></i>")
    $($task).find(".event-time").append("<a class='close-task' eventid='"+taskId+"' alt='Отметить как выполненное' title='Отметить как выполненное' href='#'><i class='checkmark box icon'></i></a>")
    tasks.push($task.get(0).outerHTML) //запуливаем крастоу в обший списококококо
}
$(".actual-tasks").html(tasks.join("")) 
})
}

Внимание вопрос. Почему этот обработчик события, обрабатывается только из кода который на был сгенерирован ЯваСкриптом?

function closeTask() {
    var taskId, task, data;
    taskId = $(this).attr("eventid");
    task = ".t" + taskId.toString();
    $(task).find(".event-text").addClass("closed");
    data = {
        "taskid": taskId
    };
    $.post("/closetask", JSON.stringify(data), serverSuccess);
    function serverSuccess(data) {
        console.log(data);
    }
}
$(".close-task").click(closeTask);

При том что на выходе(в браузере) я получаю абсолютно идентичные HTML данные...