无法在JS创建的HTML中附加事件处理程序

Question

我正在尝试使用本教程构建日历，该教程使用骨干和jQuery FullCalendar插件。我想将单击事件处理程序附加到日历的单元格（工作日视图） - 这是我尝试进行测试的代码：

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

以上是不起作用的。fc-event时间是与包含时间的单元相关联的类。在这里，是单元格的图像，其中有一些音符。图像

整个日历是用js创建的。唯一需要的html是名为日历的div。这是不能连接事件处理程序的原因。查看一些代码以查看我在说什么：

    <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是骨干代码（休息，渲染函数，模型等），它在日历中添加了一些功能和custy_cal_code.js是我的代码。上面是试图附加事件处理程序的。

您的问题是，在绑定事件时，这些元素尚不存在。而是尝试通过绑定现有的高级元素来使用事件委托。

例如，您可以使用jQuery的.on

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

这是我认为您想要的测试用例的香草JS（参考）示例。杰克的答案也适合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);
})();