Question

我正在尝试使用这个使用backbone和jquery FullCalendar插件的tutorial来构建日历。我想将click事件处理程序附加到日历的单元格（工作日视图） - 这是我尝试测试的代码：

$(document).ready(function()
{

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

});

以上不起作用.fc-event-time是与包含时间的单元格相关联的类。这里是一个单元格的图像，其中包含一些注释。 image

整个日历是用JS创建的。唯一需要的HTML是一个名为calendar.Can的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是骨干代码（REST，渲染函数，模型等），它为日历添加了一些功能，custom_cal_code.js是我看到的代码上面 - 它试图附加事件处理程序。为了简洁起见，上面没有显示查询依赖项。

Answer 1

您的问题是，在绑定事件时，DOM中尚不存在这些元素。而是通过绑定到现有的更高级别元素来尝试使用event delegation。

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

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

Answer 2

这是一个我认为你想要的测试用例的vanilla 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);
})();

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

2 个答案: