JQuery 无法调用使用 .load 放置的 HTML 上的函数答案

【问题标题】：JQuery can't call function on HTML placed using .loadJQuery 无法调用使用 .load 放置的 HTML 上的函数
【发布时间】：2011-01-22 09:49:45
【问题描述】：

我遇到了一些问题。我正在使用 JQuery 和 PHP 动态更新下拉列表。我正在使用以下 JQuery 代码来运行 PHP 页面并将结果插入到页面中：

$("#booking-form-area").change(function()
  {
  ajax_availabletimes();
  })

function ajax_availabletimes(){
  var venue_val=$("#booking-form-venue").val();
  var people_val=$("#booking-form-people").val();
  $("#booking-form-time-select-ajax").load("/booking/times-dropdown.php", {venueUID : venue_val, people : people_val}, function(){
  })
}

在 times-dropdown.php 中，我基本上是在做一些查找并以以下形式返回一些 html：

<select class="small" id="booking-form-time-select"><option value="-1">Select Time...</option><option value="12:00">12:00pm</option><option value="12:30">12:30pm</option><option value="13:00">1:00pm</option></select>

这被放入#booking-form-time-select-ajax div中。

但是，如果我现在尝试在此处的下拉列表中选择某些内容，它应该会触发该功能（这在选择下拉列表并且 $("#booking-form-offer-select-ajax").load 已替换代码之前有效):

$("#booking-form-time-select").change(function()
  {
  ajax_offerdropdown();
  })

我只能假设一旦 JQuery 替换了 booking-form-time-select 中的代码，它就不能使用选择器了？知道如何解决这个问题吗？我一直在阅读有关 $(data) 函数的信息，但这很令人困惑，并且不确定它是否是我要找的？

【问题讨论】：

标签： jquery ajax jquery-selectors

【解决方案1】：

在这种情况下使用 .live()：

$("#booking-form-time-select").live('change', function(){
  ajax_offerdropdown();
});

这会在 DOM 级别设置一个事件侦听器，在替换元素时不会被删除。

【讨论】：

太棒了，非常感谢你们所有人，这让我整个周末都发疯了！
在我看来，大约有 5 种不同的东西占了新 jQuery 程序员头上所有头发的 80%。

【解决方案2】：

.change() 监听器是在页面加载时添加的，所以当你替换一个 DOM 元素时，附加的 .change() 监听器会被移除。尝试使用 live()，它会自动将侦听器添加到初始页面加载后添加的任何 DOM 元素。

【讨论】：

【解决方案3】：

使用“直播”

 $("#booking-form-time-select").live('change', function() { ... });

【讨论】：

【解决方案4】：

作为替代方案，为什么不只替换选项而保留标签 select 不变？我的意思是返回

选择时间...12:00pm12:30pm1:00pm

从 php 代码并使用 $('#booking-form-time-select').html(options); 更新选择选项这样你的处理程序就被保留了

【讨论】：