Почему не работает js скрипт после добавления новости?

Question

[Robert]

Суть вот в чем.
Есть возможность добавлять новость через ajax, после чего create экшн рендерит create.js.erb файл соответственно. Он, в свою очередь, занимается тем, что добавляет новый блок. Все просто и все работает.
У меня есть кастомный js файл, в котором я описал некоторые действия для каждой новости на странице. По клику на соотв. блок с классом "show-form" я показываю форму редактирования новости, на блок который мы только что нажали. Здесь тоже все работает, вот код:

var show = function() {
  $('.show-form').click(function(){
    var id = $(this).attr("data-id");
    $(".edit-form[data-id =" + id + "]").toggle('fast');
  });
}

$(document).ready(show);
$(document).on('page:load', show);

Проблема заключается в том, что этот скрипт не работает после добавления самой новости через ajax. Приходится перезагружать страницу и только тогда все начинает работать.
Как заставить скрипт подгружаться снова после добавления новости?

Answer 1

[Виталий Инчин ☢]

Конечно же не работает - обработчиков то нет.

//Перебираются все элементы с данным селектором и им устанавливается обработчик. 
//Соответственно, если элемент загрузится позже, он будет без обработчика
 $('.show-form').click(function(){});

//Отлавливается просто клик на странице, 
//если целевой элемент удовлетворяет селектору, вызывается обработчик.
$(document).on("click", ".show-form", function(){});

Comments

[Robert]

Спасибо!

Answer 2

[Дмитрий Кравченко]

$('.show-form').on('click',function(){/* stuff */});

Так должно сработать.
Суть в том, что на новый кусок html, подгружаемый через ajax, еще не навешан обработчик клика

Comments

[thepry]

Лучше даже $(document).on('click', '.show-form', function(){...})

[Дмитрий Кравченко]

thepry: да, верно