javascript - jQuery on() 在 Chrome、Safari 中不起作用。适用于 Firefox

Question

我有一个页面，您可以在其中单击日历日(例如，周一)，它会在页面其他位置的 div 中的某些上课时间进行 ajax 加载，并使用名为 timeSpan 的类将每个 div 包装在一个 div 中。然后，我让用户单击其中一个时间(突出显示它)来选择一个。这在 Firefox 中效果很好，但今天我发现它在 Safari 或 Chrome 中不起作用。没有尝试过 IE，因为我使用的是 Mac。这是代码:

jQuery.root.on("click", ".timeSpan", function(event) {

我把它作为 .delegate() 而不是 .on() ，而且效果也很好。然后我在这里搜索并找到了使用.on的建议，所以我切换了。在 FF 中仍然有效，但在其他任何地方都无效。我正在使用 jQuery 2.1.4，但如果需要我可以更改。

这是渲染 timeSpan div 的行:

html+= "<div class='timeSpan' data-classdate='" + class_date + class_date_endTime + "' data-date='" + class_date2 + "' data-eventid='" + eventid + "'>" + the_date + ",<br>" + start_time + " to " + end_time + "</div><br>";

有什么想法可以解决这个问题吗？谢谢!

Answer 1

由于您是动态生成 html，因此需要在文档上委托(delegate)单击事件。

html+= "<div class='timeSpan' data-classdate='" + class_date + class_date_endTime + "' data-date='" + class_date2 + "' data-eventid='" + eventid + "'>" + the_date + ",<br>" + start_time + " to " + end_time + "</div><br>";

$(document).on("click", ".timeSpan", function(event) { // delegates the click event on the dom and during event invocation checks class timespan 

});