Обновить DOM с jquery после звонка AJAX

Question

Я работаю над новым проектом http://www.hotwirerevealed.com, который показывает/идентифицирует отели на hotwire.com. После ввода состояния и адресата у меня есть функции javascript, которые используют метод .post jquery для публикации. Почтовый запрос отправляется на страницу php, которая выводит html, html метод se se 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

Просто, чтобы быть ясным, $ («# details»). Html (data) загружает «a «Тэги правильно?

Последний раз, когда я установил флажок, fancybox() требует, чтобы элемент уже был на DOM. Когда $ (document) .ready fire, $ (". 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 уже. Там могут быть некоторые осложнения.

Answer 2

Самый быстрый способ, которым я хотел бы сделать это, чтобы добавить livequery plugin на страницу,
, а затем вместо вашего:

$(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' 
     }); 
    }); 
});