2013-09-04 19 views
6

Ho una tipica chiamata AJAX che aggiunge alcuni HTML alla pagina corrente. Voglio poter accedere al codice HTML appena inserito con i selettori jQuery tipici.Accesso all'oggetto DOM dopo la chiamata AJAX?

Ecco quello che mi come per essere in grado di fare ...

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
    } 
}); 

$('#new_div').show(); 

#new_div sarebbe qualche elemento HTML dai dati ho recuperato. Non voglio necessariamente associare eventi ai nuovi elementi (come click), quindi l'utilizzo di qualcosa come .load() o .on() non funziona qui (per quanto ne so).

Ho provato a impostare la chiamata $.ajax() a una variabile: var new_div = $.ajax(...) ma questo non mi ha portato da nessuna parte.

+0

a) Ha verificare la tua la richiesta di ajax funziona effettivamente (con console di sviluppo, avvisi o firebug) eb) qual è il suo output? – DanFromGermany

+2

Sì, la richiesta funziona correttamente. L'output quando si tenta di accedere al nuovo elemento DOM al di fuori della chiamata di successo è solo indefinito. – Shpigford

+1

AJAX è asincrono quindi il 'new_div' non è stato ancora aggiunto –

risposta

1

come circa:

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data).find('#new_div').show(); 
    } 
}); 
+0

C'è un sacco di cose aggiuntive che devo fare. Non * solo * 'mostra()'. Ho bisogno di accedervi al di fuori della chiamata di successo. – Shpigford

+0

Cosa vuoi fare in realtà? –

+0

Cosa voglio veramente fare con l'elemento DOM? Ogni sorta di cose. C'è un sacco di altre funzioni che ho bisogno di accedere agli elementi DOM appena inseriti. – Shpigford

2

Se si vuole separare il codice dalla richiamata:

functionWithALotOfStuffToDo = function(data){ 
    // do stuff here 
} 

$.ajax({ 
    url: url, 
    success: functionWithALotOfStuffToDo 
}); 
12

Se si desidera manipolare il nuovo contenuto subito dopo (o anche prima) di inserirlo al DOM, puoi inserirla anche nel callback di successo AJAX:

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     $('#new_div').show(); 
    } 
}); 

Sull'altro parte, se si desidera associare i gestori al contenuto che verrà aggiunto alla pagina tramite la tecnologia AJAX, jQuery lo fa in questo modo:

$(document).on('click', '#new_div', function(){ 
    alert("This function is bound to all #new_div's click events, even if they are added to the DOM via ajax later!") 
}); 
0

Supponendo che i dati che vengono restituiti è qualcosa di simile <div id='new_div' /> quindi provare qualcosa come

var newDiv = null; 

$.ajax({ 
    url: url, 
    success: function(data) { 
     newDiv = $(data).appendTo($('body')); 
    } 
}); 

Questo aggiungerà il <div /> al corpo della pagina e assegnerà l'elemento jQuery alla variabile newDiv a cui è possibile accedere nuovamente in una fase successiva.

Tuttavia, se si accede newDiv prima success è stato restituito, sarà null o il valore precedente, se è stato assegnato in precedenza.

0

In realtà questo genere di cose può essere risolto in questo modo: (lo so che è simile agli altri, ma un po 'più chiaro)

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     afterHtmlAppendCallback(); 
    } 
}); 
function afterHtmlAppendCallback() 
{ 
    $('#new_div').show(); 
} 
0

Penso che sia ajax asincrona causare il problema si parla .

Nella API jQuery ajax funciton: Eseguire una richiesta asincrona HTTP (Ajax).

Se si vuole accedere ai dati da destra ajax dopo la richiesta

si dovrebbe mettere il codice in ajax.funzione di successo come:

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     $('#new_div').show(); 
    } 
}); 

o attivare l'impostazione asincrona in falsa

$.ajax({ 
    url: url, 
    async:false, 
    success: function(data) { 
     $('body').append(data); 
    } 
}); 
$('#new_div').show(); 

che farà in modo il $ ('# new_div') Selettore ottiene l'oggetto

Problemi correlati