刷新DOM使用AJAX调用后的jQuery [英] Refresh DOM with jquery after AJAX call

问题描述

我工作的一个新项目的 http://www.hotwirerevealed.com 揭示/识别的酒店在hotwire.com。输入状态和目的地后，我有一个使用jQuery的。员额的方法来发布的JavaScript功能。 POST请求进入到一个PHP页面，该页面输出HTML，我本身jQuery的HTML的方法来放置在页面上的内容。

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.

像这样

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>

我尝试使用jQuery的花式框，但看中盒

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

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

但它似乎并没有工作，即时猜测因为jQuery不知道该元素在那里？我试图使用jQuery活（）方法，但收效甚微，任何帮助，将AP preciated，由于提前时间

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

推荐答案

只是要清楚，$（＃详细信息）。HTML（数据）加载一的标签吗？

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

我最后一次检查，的fancybox（）要求将已在现有的DOM元素。当$（文件）。就绪火灾时，$（酒店）可能并不存在。

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

您可能必须注意调用的fancybox到已调用的fancybox已经元素。可能有一些并发症那里。

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

这篇关于刷新DOM使用AJAX调用后的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！