JQuery не может вызвать функцию в HTML, размещенном с использованием .load

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.

Однако, если я сейчас попытаюсь выбрать что-то в раскрывающемся списке, он должен запустить функцию (это работает до того, как был выбран раскрывающийся список, и $ ("# booking-form-offer-select-ajax"). Load заменил код ):

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

Я могу предположить, что только JQuery заменил код в форме бронирования, выбрав время, тогда он не сможет использовать селекторы? Есть идеи как это исправить? Я читал о функции $ (data), но это сбивает с толку и не уверен, что это то, что я ищу?

Answer 1

Используйте .live () в этом случае:

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

Это помещает прослушиватель событий на уровень DOM, который не будет удален при замене элемента.

Answer 2

Слушатель .change () добавляется при загрузке страницы, поэтому при замене элемента DOM присоединенный слушатель .change () удаляется. Попробуйте использовать live (), которая автоматически добавит слушателя ко всем элементам DOM, которые добавляются после начальной загрузки страницы.

Answer 3

в качестве альтернативы, почему бы не заменить только опции, оставив нетронутым тег select? я имею в виду просто вернуть

Выберите время ... 12:00 вечера 12:30 вечера 1:00 вечера

из php-кода и обновите опции выбора, используя $ ('# booking-form-time-select'). Html (опции); Таким образом, ваш обработчик сохраняется

Answer 4

Использовать «вживую»

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