Comment puis-je obtenir le comportement de type $ (document) .ready pour le contenu AJAX?

Question

$(document).ready(handler) s'exécute une fois que le DOM est entièrement chargé. Si le contenu est ajouté ultérieurement à la page à l'aide d'AJAX, qui contient une fonction $(document).ready(handler), cette fonction est exécutée immédiatement, conformément au code jQuery API. De plus, .ready ne peut être appelé que sur un objet jQuery correspondant au document en cours.

Ce n'est pas ce que je veux, mais :)

Comment puis-je obtenir ce type de fonctionnalité .ready pour les données chargées via AJAX après .ready a déjà tiré, d'une manière compatible multi-navigateur?

EDIT: Voici un exemple très simplifié. J'ai un problème que j'essaie de résoudre, mais je suis plus intéressé à comprendre comment le faire correctement. Fondamentalement, la fonction .ready dans ajaxPage.html est en train de se déclencher avant que importantDependency.js soit complètement chargé, donc le premier chargement d'ajaxPage, importantDependency est manquant, mais les charges suivantes le voient.

index.html

... 
<script type="text/javascript"> 
    $(document).ready(function() { 
    alert("The document is ready"); 

    $('#myButton').click(function() { 
     $('<div></div>').dialog({ 
     open: function() { 
      $(this).load('ajaxPage.html'); 
     } 
     }); 
    }); 
    }); 
</script> 
... 

ajaxPage.html

... 
<script type="text/javascript" src="importantDependency.js"></script> 
<script type="text/javascript"> 
    $(document).ready() { 
    $('#thing').leverageImportantDependency(); 
    }); 
</script> 
... 

EDIT 2: Je veux faire DE le contenu chargé, non de la page appelant le contenu. La modification de la page d'appel signifie la duplication de code dans chaque instance où elle est appelée. Je voudrais que le comportement soit attaché au contenu, pas à la page qui l'appelle.

Answer 1

En général, vous voulez faire quelque chose comme ceci:

$("#container").load(function(html) { 
    // container has been filled up, and is 
    // ready for JS processing 
    doSomethingWithNewContent(); 
}); 

C'est-à-dire quelque chose de feu une fois le contenu a été remplacé, en utilisant la fonction de rappel ajax appropriée. D'autres exemples:

$.get("foo.html", function(html) { 
    $("#container").html(html); 
    $("#container").find(".foo").fancyThing(); 
}); 

$.ajax({ 
     url: 'foo.html', 
     type: 'post', 
     success: function(html) { 
        $("#container").html(html).find(".foo").hide(); 
       } 
    }); 

Voir:

• http://api.jquery.com/jQuery.ajax/
• http://api.jquery.com/jQuery.post/
• http://api.jquery.com/jQuery.get/
• http://api.jquery.com/jQuery.load/

EDIT: D'après ce que je understa À partir de votre modification, vous souhaitez attacher un élément, tel qu'un gestionnaire d'événement ou un plug-in, à certains éléments qui continuent à être remplacés. Il y a quelques façons de le faire:

1. Dans les callbacks de succès, comme démontré ci-dessus .
2. en utilisant .live ou .delegate.
3. En utilisant .liveQuery.

Answer 2

Vous pouvez utiliser la propriété complète d'un appel JQuery Ajax. La fonction complète est appelée après succès ou erreur.

$.ajax({ 
    url: "foo", 
    complete: function({ 
    // I'm done 
    } 
}); 

Voir: http://api.jquery.com/jQuery.ajax/

Answer 3

Je ne sais pas si je votre question, mais quand vous avez récupéré les données, vous faites simplement ce que vous voulez dans le gestionnaire de succès de l'appel ajax:

$.ajax({ 
     url: pageUrl, 
     success: function (data) { 
      $(".someContainer").html(data); 
      // TODO: This is your ready handler for the new content 

     } 
    });