JQuery / JavaScript перестают работать после удаленного вызова - PullRequest
Новая
       14

JQuery / JavaScript перестают работать после удаленного вызова

2 голосов
/ 31 июля 2011

У меня есть страница с набором комментариев к статье и кодом jquery, который позволяет мне редактировать комментарий, когда я нажимаю на него:

comments.js.coffee 

$ ->
  $(".comment").click ->
    html = '''
              <form accept-charset="UTF-8" action="/comment?id=''' + $(this).data('value') + '''" data-remote="true" id="updt_comment_form" method="post">
              <textarea name="content"> ''' + $(this).children('p').text()+ ''' </textarea>
              <input name="commit" type="submit" value="Save">
              </form>
           '''
    $(this).hide()
    $(html).insertAfter($(this))

Когда я отправляю эту форму (удаленно), отображается следующее: комментарии / update.js.erb 

$('#comments').replaceWith('<%=  escape_javascript(render("comments", :layout => false)) %>');
$('#fresh_comment').show();
$('#fresh_comment').effect("highlight", {}, 3000);

После того, как я отправил эту форму, код jquery в comments.js.coffee перестает работать. В следующий раз, когда я нажму на комментарий, я не смогу его отредактировать, если я не перезагружу страницу (что противоречит цели использования ajax).

Это нормально? Я делаю что-то не так?

Единственное решение, о котором я могу подумать, - сбросить триггер jquery в update.js.erb, чтобы он снова заработал ... но это не так.

Я не понимаю, почему ЛЮБОЙ из моего кода jquery перестает работать после выполнения ЛЮБОГО удаленного вызова.

Заранее спасибо!

1 Ответ

2 голосов
/ 31 июля 2011

Вам необходимо делегировать обработчик щелчков элементу контейнера, например: 

$("#comment").parent().delegate(".comment", "click", function() {
    // handler code
});

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

Ссылка:

Примечание: для этого вы также можете использовать .live, но .delegate имеет ряд преимуществ перед ним. 

$(".comment").live("click", function() {
    // do stuff
});
...