在 Ajax 生成的工具提示中获取选定的单选按钮值

Question

我正在尝试从 this page 上通过 Ajax 插入的工具提示中获取选定的单选按钮值。

输出 HTML 如下所示：

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

这是我当前的jQuery：

$("input[name='rentalTimes']").on("change", function() {
    var $theTime= $("input[name='rentalTimes']:checked").val();
    alert($theTime);
});

正如我所说，这些工具提示已 Ajax 插入。这是代码：

$.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"
});

我正在使用 Bootstrap 工具提示。

有人知道我做错了什么或在 Ajax 创建的 div 中获取选定单选按钮的正确技术吗？

感谢您的浏览 - 乔

Answer 1

由于工具提示是 ajax 插入的，因此当您在此处设置事件侦听器时它们不会 DOM 就绪。

$("input[name='rentalTimes']").on("change", function() {
  var $theTime= $("input[name='rentalTimes']:checked").val();
  alert($theTime);
});

您可以在 body 元素上设置事件侦听器并为更改事件传递一个选择器，如下所示：

$('body').on("change", "input[name='rentalTimes']", function() {
  var $theTime= $("input[name='rentalTimes']:checked").val();
  alert($theTime);
});

在 Ajax 生成的工具提示中获取选定的单选按钮值

Get selected radio button value in Ajax-generated tooltip

ajax

radio-button

twitter-bootstrap-tooltip