Question

我遇到了一些问题。我使用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中的代码，那么它就无法使用选择器？知道如何解决这个问题吗？我一直在阅读关于$（数据）功能的信息，但它很混乱，不确定它是我在找什么？

Answer 1

在这种情况下使用.live（）：

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

这会在DOM级别放置一个事件监听器，当元素被替换时不会被擦除。

Answer 2

.change（）侦听器是在页面加载时添加的，因此当您替换DOM元素时，附加的.change（）侦听器将被删除。尝试使用live（），它会自动将侦听器添加到在初始页面加载后添加的任何DOM元素。

Answer 3

使用“live”

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

Answer 4

作为替代选择，为什么不保留选项时保留原封不变的选项？我的意思是回来

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

从PHP代码

并使用$（'＃booking-form-time-select'）更新选择选项.html（options）; 这样就可以保存你的处理程序

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

4 个答案: