Manipolare elementi dopo Ajax Load ()

Question

Sto cercando di manipolare alcuni elementi dopo averli caricati usando .load (). Ho tutto il caricamento corretto, ma non riesco a colpire alcun elemento all'interno di nessuno degli elementi caricati. Sembra qualcosa che sarebbe facile, ma posso solo metterci il dito sopra.

Sto usando un callback dopo il caricamento degli elementi, ma il DOM sembra non essere consapevole della loro esistenza?

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

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

Ok, questo è dove sono ora. Ho aggiunto...

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

che funziona. Deve esserci una differenza tra il completamento. Autoc e il callback che è confezionato con la funzione .load (). Non mi piace molto perché si chiama ogni volta che un evento Ajax ha finito di caricare, ma mi porta un po 'più avanti lungo la strada.

Qualcuno ha qualcosa di meglio?

MODIFICARE

Ho anche provato ...

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

Il che è un po 'bello poiché aspetta fino a quando tutte le chiamate dell'Ajax non vengono fatte prima di chiamare la funzione. Forse questo è il modo di farlo, ma sembra ancora che la funzione .load () si prenderà cura di questo?

Answer 1

Sembra che la tua funzione di callback invece di passarla al metodo di caricamento:

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

Quindi ciò che è stato passato al metodo di carico è nullo perché non esiste un valore di restituzione in load_complete

Answer 2

A volte l'HTML richiede un po 'di tempo per il rendering. Prova ad aggiungere un ritardo prima di accedere al nuovo contenuto:

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

Answer 3

Devi includere il JavaScript che è quello di manipolare gli oggetti caricati nell'elemento che viene caricato. Questo perché ha già attraversato tutto il tuo JavaScript.

modificare

Prova questo, imposta l'asincronicità su False in modo che tu possa aggiungere un callback dopo il caricamento.

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

aggiornare

Ehi, c'è anche questa stenografia che otter che uso occasionalmente. Mi sorprende che non funzionino nella tua sceneggiatura ..

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