Actualiser DOM avec jquery après appel AJAX

Question

Je travaille sur un nouveau projet http://www.hotwirerevealed.com qui révèle/identifie les hôtels sur hotwire.com. Après avoir entré un état et une destination, j'ai une fonction javascript qui utilise la méthode .post de jquery pour publier. La demande de poste va à une page php qui sort html, je me s la méthode html de jquery pour placer le contenu sur la page.

comme si

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

J'ai des liens hypertextes vers des hôtels que j'aime à utiliser dans une boîte à lumière

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

im essayant d'utiliser la boîte fantaisie jquery mais boîte fantaisie

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

mais ça ne semble pas fonctionner, je devine parce que jquery ne connait pas l'élément là-bas? J'ai essayé d'utiliser la méthode jquery live() avec peu de succès, toute aide serait appréciée, merci d'avance

Answer 1

Pour être clair, $ ("# details"). Html (data) charge le "a "tags bien?

La dernière fois que j'ai vérifié, fancybox() nécessite que l'élément soit déjà existant sur le DOM. Lorsque $ (document) .ready se déclenche, le $ (". Hotel") n'existe probablement pas encore. Vous pouvez déplacer les configurations FancyBox après $ .post comme:

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

Vous pourriez avoir à surveiller pour appeler fancybox aux éléments qui ont été appelés avec fancybox déjà. Il pourrait y avoir des complications là-bas.

Answer 2

Le moyen le plus rapide que je le ferais est d'ajouter le livequery plugin à la page,
puis au lieu de votre:

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

faire ceci:

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