一千萬個為什麽

搜索

jQuery/javascript在遠程調用後停止工作

我有一個頁面,其中包含一篇關於文章和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">
              


              <input name="commit" type="submit" value="Save">
              </form>
           '''
    $(this).hide()
    $(html).insertAfter($(this))

當我提交此表單(遠程)時,會呈現以下內容: 評論/ update.js.erb

$('#comments').replaceWith(' false)) %>');
$('#fresh_comment').show();
$('#fresh_comment').effect("highlight", {}, 3000);

提交此表單後,comments.js.coffee中的jquery代碼停止工作。下次我點擊評論時,我將無法編輯它,除非我重新加載頁面(這違背了使用ajax的目的)。

這是正常的嗎?難道我做錯了什麽?

我能想到的唯一解決方案是重置update.js.erb中的jquery觸發器以使其再次工作......但這似乎並不正確。

我不明白為什麽我的jquery代碼在執行任何遠程調用後停止工作。

提前致謝!

最佳答案

您需要將click處理程序委托給容器元素,例如:

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

當您通過 .replaceWith 替換 .comment 時,原始的點擊處理程序不再存在。事件委托意味著附加的處理程序將始終有效,因為處理程序綁定到一個容器元素,而該容器元素未被替換。

參考:

註意:您也可以使用 .live ,但 .delegate 有幾個優點。

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

轉載註明原文: jQuery/javascript在遠程調用後停止工作