在AJAX调用后用jquery刷新DOM

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>

我试图使用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”）可能还不存在。您可以在$
.post之后移动fancybox设置，例如：

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调用的元素。那里可能会有一些并发症。