Question

我正在开发一个新项目http://www.hotwirerevealed.com，用于显示/识别hotwire.com上的酒店。输入状态和目的地后，我有一个javascript函数，使用jquery的.post方法发布。帖子请求转到一个输出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

我最快的方法是将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'
      });
  });
});

Answer 2

为了清楚，$（“＃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调用的元素。那里可能会有一些并发症。

在AJAX调用后使用jquery刷新DOM

2 个答案: