donglong2856
2010-04-18 01:23
浏览 183

在AJAX调用后使用jquery刷新DOM

I'm working on a new project http://www.hotwirerevealed.com which reveals / identifies hotels on hotwire.com. After inputting a state and a destination I have a javascript functions that uses jquery's .post method to post. The post request goes to an php page which outputs html, I se jquery's html method to place the content on the page.

like so

function post(){
    $.post("lookup.php", {action: "find", area: area, stars: stars, amenities: amenities, state: $('#state').val()}, function(data){ 
        $("#details").html(data);
    });
}

I have hyperlinks to hotels which I like to use in a light box

<a class="hotel" href="http://google.com/search?btnI=1&amp;q=Amerisuites+Northeast+Orlando+(Airport+MCO)">Amerisuites Northeast</a>

im trying to use jquery's fancy box but fancy box

$(document).ready(function(){
    $(".hotel").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'type'              : 'iframe'
    });
});

but it doesn't seem to work, im guessing because jquery doesn't know the element it there? I've tried to use jquery live() method with little success, any help would be appreciated, thanks ahead of time

图片转代码服务由CSDN问答提供 功能建议

我正在开发一个新项目 http://www.hotwirerevealed.com 显示/识别hotwire.com上的酒店。 输入状态和目的地后,我有一个javascript函数,使用jquery的.post方法发布。 帖子请求转到一个输出html的php页面,我用jquery的html方法将内容放在页面上。

像这样

  function post(){
 $ .post(“lookup.php”,{action:“find”  ,地区:区域,星级:星级,设施:设施,州:$('#state')。val()},功能(数据){
 $(“#details”)。html(数据); 
  }}; 
} 
   
 
 

我想要在灯箱中使用酒店的超链接

 &lt; a class =“hotel”href =“http://google.com/search?btnI=1&amp;q=Amerisuites+Northeast+Orlando+(Airport+MCO)”&gt; Amerisuites Northeast&lt; / a&gt; \  n   
 
 

我试图使用jquery的花式框但是花式框

  $(document).ready(function()  {
 $(“。hotel”)。fancybox({
'宽度':'75%',
'高度':'75%',
'类型':'iframe'
});  
}); 
   
 
 

但它似乎不起作用,我猜是因为jquery不知道那里的元素? 我已经尝试使用jquery live()方法但收效甚微,任何帮助都会受到赞赏,提前谢谢

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douzhi7070 2010-04-18 01:38
    已采纳

    Just to be clear, $("#details").html(data) loads the "a" tags right?

    Last time I checked, fancybox() requires the element to be already existing on the DOM. When $(document).ready fires, the $(".hotel") probably doesn't exist yet. You can move the fancybox setups after $.post like:

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

    You might have to watch out for calling fancybox to elements that have been called with fancybox already. There might be some complications there.

    点赞 打赏 评论
  • dsdxlibt98300 2010-04-18 02:12

    The quickest way I'd do it is to add the livequery plugin to the page,
    and then instead of your:

    $(document).ready(function(){
      $(".hotel").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'type'              : 'iframe'
      });
    });
    

    do this:

    $(document).ready(function(){
      $(".hotel").livequery(function(){
        $(this).fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'type'              : 'iframe'
          });
      });
    });
    
    点赞 打赏 评论

相关推荐 更多相似问题