Обновите DOM с помощью jquery после вызова AJAX

Question

Я работаю над новым проектом http://www.hotwirerevealed.com, который показывает / идентифицирует отели на hotwire.com. После ввода состояния и пункта назначения у меня есть функции javascript, которые используют метод jpost для публикации. Запрос post отправляется на страницу php, которая выводит html, я использую html-метод jquery для размещения содержимого на странице.

вроде так

function post(){
    $.post("lookup.php", {action: "find", area: area, stars: stars, amenities: amenities, state: $('#state').val()}, function(data){ 
        $("#details").html(data);
    });
}

У меня есть гиперссылки на отели, которые мне нравятся в лайтбоксе

<a class="hotel" href="http://google.com/search?btnI=1&amp;q=Amerisuites+Northeast+Orlando+(Airport+MCO)">Amerisuites Northeast</a>

я пытаюсь использовать модную коробку jquery, но модную коробку

$(document).ready(function(){
    $(".hotel").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'type'              : 'iframe'
    });
});

но, похоже, это не сработает, я думаю, потому что jquery не знает, что это за элемент? Я пытался использовать метод jquery live () с небольшим успехом, любая помощь будет признательна, спасибо заранее

Answer 1

Самый быстрый способ сделать это - добавить плагин livequery на страницу,
а потом вместо твоего:

$(document).ready(function(){
  $(".hotel").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'type'              : 'iframe'
  });
});

сделать это:

$(document).ready(function(){
  $(".hotel").livequery(function(){
    $(this).fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'type'              : 'iframe'
      });
  });
});

Answer 2

Для ясности, $ ("# details"). Html (data) загружает теги "a", верно?

В прошлый раз, когда я проверял, fancybox () требует, чтобы элемент уже существовал в DOM. Когда $ (document) .ready срабатывает, $ (". Hotel"), вероятно, еще не существует. Вы можете переместить настройки fancybox после $ .post, например:

function post(){
  $.post("lookup.php", 
    {action: "find", area: area, stars: stars, amenities: amenities, state:
      $('#state').val()}, 
    function(data) { 
      $("#details").html(data);
      // bind fancy box
      $(".hotel").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'type'              : 'iframe'
      });
  });
}

Возможно, вам придется остерегаться вызова fancybox для элементов, которые уже были вызваны с помощью fancybox. Там могут быть некоторые осложнения.