Селекторы JQuery не находят класс для элементов в таблице, созданной Ajax XHR в Ruby on Rails

Question

При использовании

$('.foo').click(function(){  
    alert("I haz class alertz!");  
    return false;
  });  

в application.js и

<a href = "" class = "foo" id = "foobar_1" >Teh Foobar </a>

в любом div, который инициализируется со страницей, при нажатии «Teh Foobar» он предупреждает и не переходит по ссылке. Однако при использовании того же кода в application.js и

<a href = "" class = "foo" id = "foobar_1" >Teh Foobar </a>

возвращается в div на

form_remote_tag

при нажатии «Teh Foobar» не предупреждает и функционирует как ссылка.

Что происходит и как мне обойти это?

Answer 1

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

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

Например, этот код jQuery будет работать (ваш синтаксис может отличаться для других библиотек JavaScript):

$(document).ready(function() {
  $('body').click(function(event) {
    if ($(event.target).is('.foo')) { // <- this is the magic
      alert('Something of class foo was clicked.');
      return false;
    }
  });
});

Теперь, когда вы щелкаете что-то класса foo, это событие будет запущено, если что-то промежуточное не перехватит событие и не отменит всплывание. На самом деле, событие вызывается при нажатии почти чего-либо - оператор if только отфильтровывает, какие события заслуживают предупреждения.

Answer 2

Вы также можете использовать Live Query jQuery плагин, который может автоматически связывать события для соответствующих элементов после обновления DOM. В вашем случае это будет:

$('.foo').livequery('click', function() {  
    alert("I haz class alertz!");  
    return false;
});

Answer 3

Разметка, возвращаемая из вызова AJAX, отсутствует при настройке страницы, поэтому с ней не связаны никакие обработчики onclick. Вам нужно подключиться к поддержке Rails AJAX, чтобы при загрузке вашего div-модуля на основе AJAX он также снова выполнял ваш код установки события.