從.live（）移植到.on（）

-1

我有一個小代碼，負責繪製新添加的評論。問題是，當我重寫了代碼使用on而不是刪除live，我對新元素的代碼不工作，頁面加載之後添加的從.live（）移植到.on（）

這裏是我的代碼

$(function(){ 
    $('.show-comment-form').on("click", (function(){ 
     dataattr = $(this).data('comment'); 
     $('#new_comment').remove(); 
     $('.message-'+dataattr).append(partial_form); 
     $("#comment_parent_id").val(dataattr); 
     return false; 
    })) 
})

HTML

<a href="/phrases/52/create_comment?parent_id=16" class="show-comment-form" data-comment="16">Reply</a>

如何將點擊事件添加到所有將來頁面加載後添加的元素？

來源

2013-05-15 sanny Sin

[''jQuery.on（）']（http://api.jquery.com/on/）是非常有據可查的。 – moonwave99

你真的應該閱讀jQuery API文檔 –

變化：

$('.show-comment-form').on("click", (function(){

到：

$(document).on("click", '.show-comment-form', (function(){

當動態地添加的元素，你的目標是在網頁上不存在已經在這個例子中document元素來使用，那麼你通過元素您要附加偵聽器作爲.on()的參數。

的事件處理程序僅結合到當前選擇的元素;他們必須存在於網頁上的時候您的代碼調用。對（）。爲了確保元件存在，並且可以選擇，執行事件一個文件準備處理程序內對於那些在頁面上的HTML 標記元素結合。如果新的HTML被注入頁面，選擇的元素和新的HTML是放置到頁面後附加的事件處理程序。

另外請注意，您要指定爲接近動態插入的元素儘可能的元素：

附加多個授權的事件處理程序附近的文檔樹的頂部可能會降低性能。每次事件發生時，jQuery必須將該類型的所有附加事件的所有選擇器與從事件目標到文檔頂部的路徑中的每個元素進行比較。爲獲得最佳性能，請將文檔位置的委派事件附加到儘可能靠近目標元素的位置。避免過多使用document或document.body對大文件上的委派事件使用。

來源

2013-05-15 13:44:15 j08691

使用'document'作爲上下文不是一個明智之舉。 – jolt

@psycketom這是最好的，可以用這個例子 - 沒有其他的HTML給出。同時，我同意，這應該包含在答案 – Ian

@psycketom - 正如伊恩所說，「文檔」是一個最壞的例子。定位一個元素更接近你將要綁定的實際元素總是更好。 – j08691

從.live（）移植到.on（）

回答

相關問題