jQuery – i tag di script nell’HTML sono analizzati da jQuery e non eseguiti

Ho una pagina HTML come questa:

  
... var x = 'hello world'; ...

In un’altra pagina, sto facendo questo:

 $.ajax({ url: 'example.html', type: 'GET', success: function(data) { $('#mydiv').html($(data).find('#something').html()); alert(x); } }); 

jQuery, tuttavia, non sta eseguendo il javascript nel primo file, anche se la documentazione dice che lo fa. Come posso farlo farlo?

EDIT: Sfortunatamente nell’applicazione del mondo reale su cui sto lavorando non ho il controllo su cosa sia la pagina “inclusa”. Siamo sullo stesso dominio, ma non posso modificare il codice che emette poiché è un prodotto confezionato che il nostro reparto IT non ci permetterà di modificare.

Come ha sottolineato Pointy ( scusate il gioco di parole), jQuery mette in disordine i tag SCRIPT quando passate HTML a $() . Tuttavia, non li rimuove, ma semplicemente li aggiunge alla raccolta DOM prodotta dal tuo HTML. Puoi eseguire gli script in questo modo:

 $.ajax({ url: 'example.html', type: 'GET', success: function(data) { var dom = $(data); $('#mydiv').html(dom.find('#something').html()); dom.filter('script').each(function(){ $.globalEval(this.text || this.textContent || this.innerHTML || ''); }); } }); 

In alternativa alla risposta @James, la stringa HTML può essere analizzata con $.parseHTML() , prestando attenzione ad aggiungere il flag booleano che include gli script su true :

 $.ajax({ url: 'example.html', type: 'GET', success: function(data) { var content = $($.parseHTML(data, document, true)).find('#something'); $('#mydiv').html(content); } }); 

in questo modo è ansible eseguire qualsiasi script incorporato nel testo scaricato.

Non ne sono completamente sicuro, ma è ansible che ciò che accade sia che quando jQuery crea il frammento da $(data) , i tag dello script vengono persi a quel punto.

Se puoi fare in modo che la pagina inclusa sia davvero solo un frammento:

 

senza altre cose circostanti, quindi la tua callback di successo può fare questo:

 success: function(data) { $('#mydiv').html(data); } 

Ora quei tag di script saranno notati dalla funzione jQuery html() , che li cerca esplicitamente e li estrae. Tuttavia mantiene questi blocchi di script e li esegue dopo aver completato l’aggiornamento dei contenuti di destinazione.

Soluzione 1: il server restituisce il contenuto esatto

 $.ajax({ url: 'example.html', type: 'GET', success: function(data) { $('#mydiv').html(data); } }); 

Soluzione 2: utilizzare innerHTML

 $.ajax({ url: 'example.html', type: 'GET', success: function(data) { var dom = $(data); $('#mydiv').html(dom.find('#something')[0].innerHTML); } }); 

Mi aspetto che la prima pagina stia eseguendo il codice JavaScript, tuttavia questo non è accessibile dalla seconda pagina, quindi alert(x) non funzionerà

Se vuoi che venga restituito x , dovrai inviarlo alla risposta AJAX.