Get selected radio button value in Ajax-generated tooltip - ajax

Question

I'm trying to get the selected radio button value from within a tooltip inserted via Ajax on this page.
The output HTML looks like this:
<p>Start Time:<br></p>
<label><input name="rentalTimes" value="9am" type="radio">9:00 AM</label><br>
<label><input name="rentalTimes" value="11am" type="radio">11:00 AM</label><br>
<label><input name="rentalTimes" value="1pm" type="radio">1:00 PM</label>
Here's my current jQuery:
$("input[name='rentalTimes']").on("change", function() {
var $theTime= $("input[name='rentalTimes']:checked").val();
alert($theTime);
});
Like I said these tooltips are Ajax inserted. Here's that code:
$.ajax({
type: "POST",
url: "includes/available.php",
data: "day=" + $theID + "&calendar=" + $theDuration + "&rand=" + Math.random(),
success: function(data) {
$("#"+$theLiID).tooltip({title: data, trigger: "click", placement: "auto right",html: true});
$("#"+$theLiID).tooltip("show");
},
dataType: "text"
});
I'm using Bootstrap tooltips.
Anyone know what I'm doing wrong or the right technique for getting the selected radio button in an Ajax created div?
Thanks for taking a look - Joe

Answer 1

Since the tooltips are ajax inserted, they won't be DOM ready the moment you set the event listener here.
$("input[name='rentalTimes']").on("change", function() {
var $theTime= $("input[name='rentalTimes']:checked").val();
alert($theTime);
});
You can set the event listener on the body element and pass a selector for the change event like so:
$('body').on("change", "input[name='rentalTimes']", function() {
var $theTime= $("input[name='rentalTimes']:checked").val();
alert($theTime);
});