Caricare Javascript dopo il contenuto della pagina viene caricata con l'Ajax

Question

Sto usando Ajax (e jQuery, e anche CoffeeScript) per caricare le pagine in un nuovo sito web che sto creando. Per il menu di navigazione Ho quindi utilizzare la funzione jQuery load caricare solo una parte della pagina (vale a dire, il contenuto) come questo (da /page1):

$( 'a' ).click ->
  $( '#container' ).load '/page2 #content'

  false

Il problema di questo è che ho il codice JavaScript in page1 (o, più correttamente, in un file di modello), che è globale sul sito (a causa del gasdotto bene come sto usando Rails 3.1). Questo codice si lega alcune azioni agli eventi (è questo il corretto gergo?) In elementi DOM che si trovano in page2. Ma, in quanto questo script viene eseguito nella pagina che viene prima caricato (che facilmente potrebbe essere page1), allora lo script che lega queste azioni agli elementi saranno eseguiti in page1, e quindi gli elementi DOM che in realtà dovrebbe essere tenuto a (in page2) non saranno toccati.

Ora, so che un certo senso posso risolvere questo problema, ma non mi piace nessuno dei due. Uno di questi potrebbe essere quella di mettere questa azione / associazione in una funzione di evento, e quindi chiamare questo metodo dopo il caricamento page2 con l'Ajax, ma questo mi richiederebbe di avere sia introdurre un caso speciale nella mia logica di caricamento della pagina in cui si carica la funzione di legame dopo caricamento della pagina per legare gli elementi, o di avere uno script nel contenuto page2 dove io chiamo la funzione.

preferirei non andare con il primo approccio, come ho un modo più generale di caricamento delle pagine (utilizzando l'attributo <a> del tag href), e l'introduzione di casi particolari al caricamento della pagina appena uglifies tutto. Quest'ultima soluzione è piuttosto bello credo, ma odierei mettere <script>tags nel contenuto della pagina che sto Recupero. Mi piace separando il contenuto da comportamenti e tutto ciò che, e mi sento che questo potrebbe essere mescolando il tutto un po '.

Quindi, ciò che voglio davvero sapere qui è tutto ciò che sarebbe un buon modo per risolvere questo problema. Se qualcuno là fuori sa come fare per fare questo, quindi vorrei accogliere eventuali suggerimenti.

Answer 1

Si potrebbe desiderare di guardare in jQuery di live() evento vincolante.

Eventi legati con live() vengono applicate agli elementi del DOM retrospettivamente aggiunti pure, che dovrebbe risolvere il problema.

Modifica Per la precisione, si lega live() a $(document) e controlla l'attributo target di eventi che hanno bolle tutto il percorso attraverso il DOM - è per questo che le opere di legame, anche quando gli elementi vengono aggiunti dopo il legame il callback di evento.

Esempio HTML:

<div id="some_triggers">
    <a id="foo" href="#">Foo!</a>
</div>

Esempio jQuery:

$('#foo').click(function(){ alert('foo') });
$('#bar').click(function(){ alert('bar') });
$('#some_triggers').append('<a id="bar" href="#">Bar!</a>');
$('#foo').live('click', function(){ alert('foo live()!') });
$('#bar').live('click', function(){ alert('bar live()!') });

// -> clicking #foo alerts "foo" and "foo live()"
// -> clicking #bar alerts "bar live()" only, since the '.click()' binding doesn't work on non-existent DOM elements.