Cargar JavaScript después del contenido de la página se carga con AJAX

Question

Estoy usando Ajax (y jQuery, y también Coffeescript) para cargar páginas en un nuevo sitio web que estoy creando. Para el menú de navegación, luego uso la función jQuery load Para cargar solo una parte de la página (a saber, el contenido) como este (desde /page1):

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

  false

El problema con esto es que tengo código JavaScript en page1 (O, más correctamente, en un archivo de plantilla) que sea global en el sitio (debido a la tubería de activos, ya que estoy usando Rails 3.1). Este código une algunas acciones a los eventos (¿es esta la jerga correcta?) En los elementos doms ubicados en page2. Pero, a medida que este script se ejecuta en la página que se carga primero (que fácilmente podría ser page1), entonces el script que une estas acciones a los elementos se ejecutará en page1, y así los elementos dom que realmente debería estar obligado a (en page2) no se tocará.

Ahora, sé algunas maneras de solucionar esto, pero no me gusta ninguno de ellos. Uno de estos sería poner esta acción/evento vinculante en una función, y luego llamar a este método después de cargar page2 con Ajax, pero esto requeriría que haya introducido un caso especial en mi página de carga de la página donde cargo la función de enlace después de la carga de la página para unir los elementos o tener un script en el page2 contenido donde llamo la función.

Prefiero no ir con el enfoque anterior, ya que tengo una forma más general de cargar páginas (utilizando el <a> etiqueta href atributo), y la introducción de casos especiales en la carga de la página simplemente lo recupera todo. La última solución es bastante mejor, creo, pero odiaría poner <script>Etiqueta el contenido de la página que estoy recuperando. Me gusta separar el contenido del comportamiento y todo eso, y siento que esto podría estar mezclando un poco.

Entonces, lo que realmente quiero saber aquí es lo que sea una buena manera de resolver este problema. Si alguien sabe cómo hacer esto, entonces agradecería cualquier sugerencia.

Answer 1

Es posible que desee buscar en jQuery's live() Enlace de eventos.

Eventos atados con live() se aplican a los elementos DOM agregados retrospectivamente también, lo que debería resolver su problema.

Editar: Para ser preciso, live() se une a $(document) y verifica el target Atributo de eventos que han burbujeado hasta el DOM, por eso la vinculante funciona incluso cuando se agregan elementos después de vincular la devolución de llamada del evento.

Ejemplo HTML:

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

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