Gli script vengono eliminati con jQuery .load

Question

Non credo che questa domanda sia stata posta prima, almeno non nel modo in cui ho bisogno di rispondere. Sto usando la funzione di caricamento di jQuery. Ho un problema quando carico solo frammenti di pagina.

Quando si utilizza qualcosa come:

$('#content').load('loadTest.html'); 

Tutti gli script su loadTest.html carico più che bene. Tuttavia, quando i frammenti di caricamento della pagina come questo:

$('#content').load('loadTest.html #content'); 

gli script vengono eliminati prima del DOM in fase di aggiornamento

Questo è chiaramente documentato in http://api.jquery.com/load/ che dice:

Nota:Quando chiamando .load() utilizzando un URL senza un'espressione selettore suffissa, il contenuto viene passato a .html() prima che gli script vengano rimossi. Questo esegue i blocchi di script prima che vengano scartati. Se, tuttavia, viene chiamato .load() con un'espressione selettore aggiunta all'URL, gli script vengono eliminati prima che il DOM venga aggiornato, motivo per cui non vengono mai eseguiti. Un esempio di entrambi i casi si può vedere qui sotto:

ho capito che ho potuto solo caricare esternamente lo script che può essere utilizzato ovunque, ma il fatto è che io sto usando un sistema di ajax pagina di livello in cui tutto viene caricato in modo dinamico. Quindi non mi sento davvero di avere ogni singola funzione javascript che scriverò mai (100 a questo punto) in file esterni. Soprattutto perché alcune di queste funzioni javascript sono fatte da valori caricati da un database che non riesco a spiegare in un file .js.

Esiste una soluzione alternativa affinché gli script vengano eliminati prima che il DOM venga aggiornato? Potrei in qualche modo caricarli manualmente? Ogni piccolo esempio mi sarebbe di aiuto.

Answer 1

Come hai detto tu. jQuery estrae quell'elemento prima di eseguire solo quel blocco.

È possibile modificare l'output in modo che il server possa restituire i dati in un formato necessario o semplicemente scriverne uno proprio. Estrarrà gli elementi necessari per inviarli al DOM.

testato, ma sarebbe lungo le linee di questo ..

$('#content').load('loadTest.html #content,script'); 

Dalla memoria questo più valido ..

$.get('loadTest.html',function(r){ 
    var els = $(r).find('#content,script'); 
    $('#content').html(els); 
}); 

Answer 2

Dopo il commento Penso che potrebbe essere interessato a qualcosa di simile js/css lazyload. Carica in modo condizionale gli script, lo sto utilizzando su siti più piccoli per caricare solo script e CSS quando ne ho bisogno su diverse pagine secondarie o sull'interazione dell'utente.

Si carica una volta in testa:

<script src="js/lazyload-min.js" type="text/javascript"></script> 

E poi si può caricare gli script ogni volta che ne avete bisogno in modo dinamico, uno dei tanti esempi:

// Load a single JavaScript file and execute a callback when it finishes. 
LazyLoad.js('http://example.com/foo.js', function() { 
    alert('foo.js has been loaded'); 
}); 

Opere per i file CSS, troppo .

Questo potrebbe essere utile nel tuo caso, tuttavia potrebbe cambiare anche la tua logica di caricamento. In ogni caso, penso che normalmente dovresti avere più endpoint AJAX sul tuo server che restituiranno solo i dati richiesti. Altrimenti le cose possono diventare specifiche e anche difficili.

Quindi più un commento che una vera risposta.