Laden Sie JavaScript, nachdem der Seiteninhalt mit AJAX geladen wurde

Question

Ich verwende Ajax (und JQuery und auch Coffeescript), um Seiten in einer neuen Website zu laden, die ich erstelle. Für das Navigationsmenü verwende ich dann die JQuery -Funktion load So laden Sie nur einen Teil der Seite (nämlich den Inhalt) wie diesen (von /page1):

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

  false

Das Problem dabei ist, dass ich JavaScript -Code in habe page1 (oder genauer gesagt in einer Vorlagendatei), die auf der Website global ist (aufgrund der Asset -Pipeline, wie ich Rails 3.1 verwende). Dieser Code bindet einige Aktionen an Ereignisse (ist dies der richtige Jargon?) In DOM -Elementen, die sich in befinden page2. Aber wenn dieses Skript auf der Seite geladen wird, die zuerst geladen wird (was leicht sein könnte page1), dann wird das Skript, das diese Aktionen an die Elemente bindet page1, und so die Dom -Elemente, die sie tatsächlich sollte gebunden sein an (in page2) wird nicht berührt.

Jetzt weiß ich einige Möglichkeiten, wie ich das beheben kann, aber ich mag keinen von ihnen. Eine davon wäre darin, diese Aktion/Ereignisbindung in eine Funktion einzubeziehen und diese Methode nach dem Laden aufzurufen page2 Mit AJAX, aber dies müsste entweder einen speziellen Fall in meiner Seite laden, bei dem ich die Bindungsfunktion nach dem Laden lade, um die Elemente zu binden, oder um ein Skript in der zu haben page2 Inhalt, wo ich die Funktion aufrufe.

Ich würde lieber nicht mit dem früheren Ansatz gehen, da ich eine allgemeinere Art zum Laden von Seiten habe (indem ich die verwendete <a> Stichworte href Attribut) und die Einführung von speziellen Fällen auf der Seitenlast nur hässlich alles. Die letztere Lösung ist ziemlich schöner, glaube ich, aber ich würde es hassen, sie zu setzen <script>Tags in den Inhalt der Seite, die ich abrufe. Ich mag es, Inhalte von Verhalten und all dem zu trennen, und ich habe das Gefühl, dass dies möglicherweise alles ein wenig vermischt.

Was ich hier wirklich wissen möchte, ist, was auch immer ein guter Weg wäre, um dieses Problem zu lösen. Wenn jemand da draußen weiß, wie man das macht, würde ich irgendwelche Vorschläge begrüßen.

Answer 1

Vielleicht möchten Sie sich JQuery's ansehen live() Ereignisbindung.

Ereignisse gebunden mit live() werden auch auf retrospektiv hinzugefügte DOM -Elemente angewendet, die Ihr Problem lösen sollten.

Bearbeiten: Um genau zu sein, live() bindet an $(document) und überprüft die target Attribut von Ereignissen, die bis zum DOM nach oben geblieben sind - deshalb funktioniert die Bindung auch dann, wenn Elemente nach der Bindung des Ereignisrückrufs hinzugefügt werden.

Beispiel HTML:

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

Beispiel 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.