Get selected radio button value in Ajax-generated tooltip

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);
});