не удается связать обработчик событий в HTML, созданный JS

Question

Я пытаюсь создать календарь, используя этот tutorial, который использует магистраль и плагин FullQalendar jquery. Я хочу, чтобы прикрепить обработчик событий нажмите на мобильный (вид будний) календаря, это код, который я пытался для тестирования:

$(document).ready(function() 
{ 

$('.fc-event-time').click(function() 
{ 
    alert('test'); 
}); 

}); 

Вышесказанное не work.fc-событие-время является класс связанный с ячейкой, которая содержит время. Вот образ ячейки с некоторыми заметками в ней. image

Весь календарь создан с помощью JS. Единственный HTML-запрос - это div с именем calendar.Can, что является причиной, по которой обработчик события не может быть присоединен. Посмотрите на код, чтобы увидеть, что я имею в виду:

<script type='text/javascript' src='js/fcalendar/fullcalendar.js'></script> 
    <script type="text/javascript" src="js/underscore.js"></script> 
    <script type="text/javascript" src="js/backbone.js"></script> 
    <script type="text/javascript" src="js/fcalendar/apllication.js"></script> 
    <script type="text/javascript" src="js/fcalendar/custom_cal_code.js"></script> 

    <div id='calendar'></div> 

fullcalendar.js является файл созданный календарь внутри DIV # calendar.Application.js является основой кода (REST, делают функции, модели и т.д.), который добавляет некоторые функции в календарь, а custom_cal_code.js - это мой код, который вы видите выше, который пытается присоединить обработчик событий. Зависимости jquery не показаны выше для краткости.

Answer 1

Ваша проблема в том, что в момент привязки события эти элементы еще не существуют в DOM. Вместо этого попробуйте использовать event delegation путем привязки к существующему элементу более высокого уровня.

Например, вы можете использовать .on

$('#calendar').on('click', '.fc-event-time', function() { 
alert('test'); 
}); 

Answer 2

Вот ваниль JS (для справки) пример JQuery в испытуемой случае за то, что я думаю, что вы хотите. Ответ Джека также отлично работает для селекторов jQuery.

скрипку:

http://jsfiddle.net/x24ER/2/

код:

(function() { 
    var cal = document.getElementById('cal'); 
    var myFn = function (e) { 
    if (e.target.className === 'fc-event-time') { 
     alert('clicked'); 
    } 
    }; 
    cal.addEventListener('click', myFn); 
})();