JQuery не запускает события после первого вызова действия

Question

Я реализовал функцию, в которой пользователь может обновлять атрибут объектов до true/false непосредственно из вывода таблицы по щелчку. Все работает так, как должно быть в первый раз, но после того, как выполняется ajax-вызов, я больше не могу этого делать. Может быть, DOM не удалось загрузить?

У меня есть таблица:

<div id="dashboard_pages_table" class="small-12 columns"> 
    <%= render partial: 'layouts/admin/dashboard_pages_table', locals: {parents: @parents} %> 
</div> 

И в CoffeeScript, который прослушивает событие щелчка на один тд элемент:

jQuery -> 
    $('#sortable .onoff').on "click", (event) -> 
    page_id = event.target.parentElement.parentElement.id.match(/\d+$/)[0] 
    $.post 'update_row_onoff', 
     page_id: page_id 

CoffeeScript звонит метод update_row_onoff в мой контроллер:

def update_row_onoff 
    @target_page = Page.find(params[:page_id]) 
    if @target_page.active 
    @target_page.update_attribute(:active, false) 
    else 
    @target_page.update_attribute(:active, true) 
    end 
    respond_to do |format| 
    format.js 
    end 
end 

И затем файл update_row_onoff js.erb перезагружает объект nts таблицы dashboard_table:

$('#dashboard_pages_table').html("<%= escape_javascript(render partial: 'layouts/admin/dashboard_pages_table', locals: {parents: @parents}) %>"); 

Почему это не работает после первого успешного действия после публикации?

Answer 1

Используйте это вместо

$("body").on "click", "#sortable .onoff", (event) -> 

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

Для получения дополнительной информации перейдите к документации API, http://api.jquery.com/on/