的jQuery/JavaScript的停止遠程調用

我有一個網頁上的文章一組的意見和jQuery代碼，讓我編輯註釋，當我點擊它後工作：的jQuery/JavaScript的停止遠程調用

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);

i之後提交這種形式中，在comments.js.coffee jQuery代碼停止工作。下一次我點擊評論時，我將無法編輯它，除非我重新加載頁面（這違背了使用Ajax的目的）。

這是正常的嗎？難道我做錯了什麼？

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

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

在此先感謝！

來源

2011-07-31 dcastro

箭頭做什麼？ '$（「。comment」）。click - >'從來沒有見過它。只是好奇。我也發現''''''三個引號有點奇怪 – PeeHaa

多數民衆贊成咖啡文本，它是一樣的$（「。評論」）。點擊（功能（）{... – dcastro

'''之間的字符串表明他們的縮進和格式將被保存 – dcastro

您需要單擊處理程序委託給容器元素，例如：

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

當您通過.replaceWith更換您.comment送原裝單擊處理不再存在。事件委託意味着附加的處理程序將始終工作，因爲處理程序綁定到未替換的容器元素。

參考：

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

注意：您還可以使用.live這一點，但.delegate在它有幾個優點。

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

來源

2011-07-31 14:25:58 karim79

啊我看到了！所以當元素被替換時，處理程序和dom元素之間的綁定消失！這是有道理的......「#comments」div也被替換在ajax調用過程中，我應該使用下面的代碼嗎？$（「body」）。delegate（「。comment」，... – dcastro

@dcastro - 我剛剛編輯了我的答案，我想'$（「＃comment」）（）.parent（）。delegate（..'應該足夠了，但是，你建議的肯定會做的。 – karim79

我試着按照你的建議，它工作的奇蹟！$ - > $（「＃comments」）。parent（） .delegate「.comment」，「click」， - > – dcastro

的jQuery/JavaScript的停止遠程調用

回答

相關問題