Javascript charge après le contenu de la page est chargée avec l'Ajax

Question

J'utilise Ajax (et jQuery, ainsi que CoffeeScript) pour charger les pages dans un nouveau site web, je suis en train de créer. Pour le menu de navigation, je puis utiliser la fonction jQuery load pour charger une seule partie de la page (à savoir, le contenu) comme celui-ci (de /page1):

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

  false

Le problème c'est que j'ai du code JavaScript dans page1 (ou, plus exactement, dans un fichier modèle) qui est globale sur le site (en raison de la conduite d'actifs comme je suis en utilisant Rails 3.1). Ce code lie certaines actions à des événements (est-ce le jargon correct?) Dans les éléments DOM qui sont situés dans page2. Mais, comme ce script est exécuté dans la page qui est d'abord chargé (qui pourrait facilement être page1), le script qui lie ces actions aux éléments seront exécutés dans page1, et donc les éléments DOM qu'ils réellement devrait être lié à (en page2) ne seront pas modifiés.

Maintenant, je sais que certains égards, je peux résoudre ce problème, mais je ne aime aucun d'eux. L'un d'entre eux serait de mettre cette action / événement de liaison en fonction, puis appeler cette méthode après le chargement page2 avec l'Ajax, mais cela me obligerait soit avoir présenter un cas particulier dans ma logique de chargement de la page où je charge la fonction de liaison après chargement de la page pour lier les éléments, ou d'avoir un script dans le contenu de page2 où j'appelle la fonction.

Je préférerais ne pas aller avec l'ancienne approche, comme je l'ai une manière plus générale des pages de chargement (en utilisant l'attribut <a> de balise href), et l'introduction de cas particuliers sur la charge de la page uglifies juste tout. Cette dernière solution est un peu plus agréable que je crois, mais je ne voudrais pas mettre <script>tags dans le contenu de la page que je suis en train de récupérer. Je aime séparer le contenu du comportement et tout ça, et je pense que cela pourrait être le mélanger tout un peu.

Alors, ce que je veux vraiment savoir est ici tout serait une bonne façon de résoudre ce problème. Si quelqu'un là-bas sait comment s'y prendre, je souhaite recevoir des suggestions.

Answer 1

Vous pouvez regarder dans jQuery de live() événement de liaison.

Événements liés à live() sont appliqués à des éléments DOM rétrospectivement ajoutés ainsi, ce qui devrait résoudre votre problème.

Modifier Pour être précis, live() se fixe à $(document) et vérifie l'attribut target des événements qui ont fait barboter tout le chemin à travers les DOM - c'est la raison pour laquelle les travaux de liaison, même lorsque des éléments sont ajoutés après la liaison le rappel de l'événement.

Exemple HTML:

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

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