ruby-on-rails-3 - 远程调用后 jQuery/javascript 停止工作

Question

我有一个页面，其中包含对一篇文章的一组评论和一个 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);

在我提交此表单后，comments.js.coffee 中的 jquery 代码停止工作。下次我点击评论时，我将无法编辑它，除非重新加载页面(这违背了使用 ajax 的目的)。

这正常吗？我做错了什么吗？

我能想到的唯一解决方案是重置 update.js.erb 中的 jquery 触发器以使其再次工作......但这似乎不对。

我不明白为什么我的 jquery 代码在执行任何远程调用后停止工作。

提前致谢!

Answer 1

您需要将点击处理程序委托(delegate)给容器元素，例如:

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

当您通过 .replaceWith 替换 .comment 时，原始点击处理程序将不再存在。事件委托(delegate)意味着附加的处理程序将始终有效，因为处理程序绑定(bind)到容器元素，而不会被替换。

引用:

• http://api.jquery.com/delegate/

注意:您还可以使用 .live为此，.delegate 比它有几个优点。

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