jQuery on() not working in Chrome, Safari. Works in Firefox

Question

I have a page where you click on a calendar day (eg Monday the 1st), and it ajax-loads in some class times in a div elsewhere on the page, wrapping each in a div with a class called timeSpan. I then have the user click on one of those times (which highlights it) to pick one. This works great in Firefox, but I discovered today that it doesn't work in Safari or Chrome. Haven't tried IE because I'm on a Mac. This is the code:

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

I had had it as .delegate() instead of .on() and that worked fine too. Then I searched here and found suggestions to use .on, so I switched. Still works in FF, but not in anything else. I'm using jQuery 2.1.4 but I can change if needed.

This is the line that renders the timeSpan divs:

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>";

Any ideas how to fix this? Thanks!

Answer 1

Since you are generating the html dynamically, you need to delegate the click event on the document.

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 

});