在AJAX調用後刷新DOM和jquery

Question

我正在開發一個新項目http://www.hotwirerevealed.com，它顯示/標識hotwire.com上的酒店。輸入狀態和目的地後，我有一個使用jquery的.post方法發佈的javascript函數。發佈請求轉到輸出html的php頁面，我使用jquery的html方法將內容放在頁面上。

像這樣

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> 

IM使用嘗試使用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觸發時，$（「。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' 
     }); 
    }); 
});