jQuery / javascript在远程调用后停止工作

Question

我有一个页面，其中包含一篇文章上的一组 cmets 和一个 jquery 代码，当我点击它时，我可以编辑评论：

cmets.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))

当我（远程）提交此表单时，会呈现以下内容： cmets/update.js.erb

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

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

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

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

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

提前致谢！

Answer 1

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

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

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

参考：

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

注意：您也可以使用.live，但.delegate 比它有几个优点。

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