Manipuler les éléments après Ajax Load ()

Question

J'essaie de manipuler certains éléments après les avoir chargés en utilisant .load (). J'ai tout le chargement correctement, mais je n'arrive pas à cibler les éléments dans l'un des éléments chargés. Cela semble être quelque chose qui serait facile, mais je peux juste mettre mon doigt dessus.

J'utilise un rappel après le chargement des éléments, mais le DOM ne semble pas être conscient de leur existence?

function load_page(){
    $('#page_name').load("/page-name/ .page", null, load_complete());
}

function load_complete() {
    $('#page_name .book_img').addClass('hello');
}

Ok, c'est là que je suis maintenant. J'ai ajouté...

$('#wrapper').ajaxComplete(function() {
    $('#page_name .book_img').addClass('hello');
}

qui fonctionne. Il doit y avoir une différence entre l'auto-complete et le rappel qui est emballé avec la fonction .load (). Je n'aime pas vraiment ça car cela s'appelle chaque fois qu'un événement Ajax est fini de se charger, mais cela me fait un peu plus loin sur la route.

Quelqu'un a quelque chose de mieux?

ÉDITER

J'ai aussi essayé ...

$('#wrapper').ajaxComplete(function() {
    $('#page_name .book_img').addClass('hello');
}

Ce qui est plutôt agréable car il attend que tous les appels Ajax soient effectués avant d'appeler la fonction. C'est peut-être la façon de le faire, mais il semble toujours que la fonction .load () s'en occuperait?

Answer 1

On dirait que vous exécutez votre fonction de rappel au lieu de la transmettre à la méthode de chargement:

function load_page(){
    // $('#page_name').load("/page-name/ .page", null, load_complete());
    $('#page_name').load("/page-name/ .page", null, load_complete);
}

function load_complete() {
    $('#page_name .book_img').addClass('hello');
}

Donc, ce qui était transmis à la méthode de charge est nul car il n'y a pas de valeur de retour dans LOAD_COMPLETE

Answer 2

Parfois, le HTML prend un peu de temps à rendre. Essayez d'ajouter un délai avant d'accéder au nouveau contenu:

$('#page_name').load("/page-name/ .page", null, window.setTimeout(function(){load_complete()},50);

Answer 3

Vous devez inclure le javascript qui consiste à manipuler vos objets chargés dans l'élément qui est chargé. En effet, il a déjà parcouru tous vos javascript.

Éditer

Essayez ceci, définissez l'asynchronicité sur FALSE afin que vous puissiez ajouter un rappel après son chargement.

$.ajax ({
  async: false,
  type: "GET",
  dataType: "html",
  url: "/page-name/ .page",
  complete: function(){load_complete()};
});

mettre à jour

Hé, il y a aussi cette déclaration de raccourci que j'utilise occasionnellement. Cela me surprend que cela ne fonctionne pas dans votre script.

$.get($(this).attr('href'), function(response) { $('#content').html(response); });