Загрузка Javascript после загрузки содержимого страницы с помощью Ajax

Question

Я использую Ajax (и jQuery, а также CoffeeScript) для загрузки страниц на новом веб-сайте, который я создаю. Для меню навигации я затем использую функцию jQuery load, чтобы загрузить только одну часть страницы (а именно содержимое), как это (из /page1):

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

  false

Проблема в том, что у меня есть код JavaScript в page1 (или, точнее, в файле шаблона), который является глобальным на сайте (из-за конвейера ресурсов, так как я использую Rails 3.1). Этот код связывает некоторые действия с событиями (это правильный жаргон?) В элементах DOM, которые расположены в page2. Но так как этот скрипт запускается на странице, которая сначала загружается (что легко может быть page1), то сценарий, который связывает эти действия с элементами, будет выполнен в page1, и, таким образом, элементы DOM, которые они на самом деле если будет связан (в page2), не будет затронут.

Теперь я знаю, как это исправить, но мне не нравится ни один из них. Одним из них было бы поместить эту привязку действия / события в функцию, а затем вызвать этот метод после загрузки page2 с помощью Ajax, но для этого потребовалось бы либо ввести специальный случай в логику загрузки моей страницы, где я загружаю функция привязки после загрузки страницы для связывания элементов или для получения скрипта в содержимом page2, где я вызываю функцию.

Я бы предпочел не использовать прежний подход, так как у меня есть более общий способ загрузки страниц (с помощью атрибута href тега <a>), а введение специальных случаев при загрузке страницы только ухудшает все это. Последнее решение, на мой взгляд, более приятное, но я бы не хотел помещать теги <script> в содержимое страницы, которую я получаю. Мне нравится отделять контент от поведения и все такое, и я чувствую, что это может немного смешивать все это.

Итак, что я действительно хочу знать, так это то, что было бы хорошим способом решить эту проблему. Если кто-нибудь знает, как это сделать, тогда я буду рад любым предложениям.

Answer 1

Возможно, вы захотите посмотреть привязку событий live() в jQuery.

События, связанные с live(), применяются и к ретроспективно добавленным элементам DOM, что должно решить вашу проблему.

Редактировать: Если быть точным, live() связывается с $(document) и проверяет атрибут target событий, которые прошли весь путь вверх по DOM - поэтому привязка работает даже тогда, когда элементы добавляются после привязки обратного вызова события.

Пример HTML:

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

Пример 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.