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