2012-05-23 4 views
5

Ho un'applicazione web che essenzialmente ha viste di intestazione, piè di pagina e corpo. Sto lavorando per ajaxificare il sito web, utilizzando la libreria history.js e lo stato HTML5, ma uno dei problemi che sto riscontrando è l'inserimento di javascript da eseguire quando il javascript è inserito nel DOM.Esegui javascript iniettato dinamicamente nel DOM caricato tramite AJAX (tentando di ajaxify il sito Web con history.js)

Praticamente tutta la mia javascript è avvolto in jQuery (function() {...}) (documento loader on-ready)

Qualcuno sa una buona strategia per affrontare questo? Grazie!

risposta

7

Se ti capisco, la tua "pagina" è solo un contenitore per HTML che stai caricando in modo dinamico. All'interno di questo codice HTML sono presenti blocchi di script JavaScript che attualmente non vengono eseguiti. È corretto? Sono in script di pagina o link a nuovi file di script?

In ogni caso, credo che questo risponde alla tua domanda: How do you execute a dynamically loaded JavaScript block?

I miei pensieri:

A meno che il vostro contenitore è incredibilmente generica, e quindi non può sapere che cosa JavaScript potrebbe essere necessario, l'approccio più semplice è probabilmente per collegare manualmente tutto il tuo JavaScript alla tua pagina del contenitore, in modo che si carichi con il contenitore, magari miniato e concatenato in un singolo file.

Se è necessario caricare gli script in modo dinamico, ma si sa cosa sono, è possibile farlo con jQuery utilizzando .getScript() o .ajax(). Ho pensato che questa pagina scrivesse bene, http://www.electrictoolbox.com/jquery-dynamically-load-javascript-file/.

Analogamente, se non si conoscono gli script necessari fino a quando non si acquisisce il blocco HTML, è probabile che si possa analizzare il codice html per i collegamenti di script e collegarli manualmente tramite nuovi elementi di script aggiunti alla pagina. Ad esempio, lo script seguente aggiunge jQuery alla pagina se non esiste già.

(function() { 

    if (typeof(jQuery) == "undefined") { 
     var headID = document.getElementsByTagName("head")[0];   
     var newScript = document.createElement('script'); 
     newScript.type = 'text/javascript'; 
     newScript.id = 'myjQuery'; 
     newScript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'; 
     headID.appendChild(newScript); 
    } 

    window.addEventListener('load', function (e) { 

     //make jQuery calls here. 

    }, false); 

})(); 
+0

credo di aver appena trovato una buona risposta: http://api.jquery.com/jQuery.ajax/ dataType proprietà config: "" html" : Restituisce HTML come testo normale, tag di script inclusi vengono valutati quando ins erted nel DOM. " Ho intenzione di provarlo, ma questo suona proprio come quello che mi serve :) –

+0

Sembra carino e facile. In bocca al lupo! – jatrim

-1

uso .on, io non vado a spiegare il comportamento al di quella funzione, ma in poche parole:

lavoro attraverso gli elementi di ribollimento sul DOM per esempio si associa "onclick" ad un div voi può impostare ad alcuni o tutti i suoi figli hanno un comportamento x