Загрузите 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 Контент, где я называю функцию.

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

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

Answer 1

Вы можете захотеть изучить jQuery's live() Переплет событий.

События связаны с 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.