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

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

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

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

参考：

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

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

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

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

1 个答案: