基於類的按鈕單擊事件不會在動態創建的按鈕上觸發。

Question

我有一個動態創建行的表。每行都有一個鏈接按鈕，您可以單擊該按鈕刪除該行。這是點擊功能：

$(".deleteButton").on('click', function(){ 
    console.log("Delete Hit"); 
    var successful = deleteEntry($(this).attr('id')); 
    if(successful == true){ 
     $(this).parent().parent().remove(); 
    }else{ 
     alert("Delete Unsuccessful."); 
    } 
}); 

某些按鈕是在頁面第一次加載時用一個函數創建的。這些工作，但這個其他功能似乎創建了一個按鈕，用於事件觸發的正確類。它創建一個像這樣的鏈接。

<a class="deleteButton dButton" href="#"> 

，而作品的權利的一個創建這樣的鏈接，

<a href='#' class='deleteButton'> 

我在檢查檢查，它說，該按鈕具有類deleteButton，這是需要觸發事件，但它似乎完全忽略了它。刪除命中從未顯示在控制檯中。這真的讓我困惑了一段時間，我很感激任何人都可以提供的幫助。

Answer 1

您需要使用不上的DOM元素存在委派的事件，當你綁定事件處理

$(document).on('click', '.deleteButton', function(){...} 

哪裏document可以是任何.deleteButton容器存在於處理程序綁定時間。

Answer 2

現有的按鈕在頁面加載時獲得它們的事件處理程序，但之後新按鈕被添加到DOM。你將不得不更新JavaScript代碼，就像這樣：

$(document).on('click', '.deleteButton', function(){ 
    console.log("Delete Hit"); 
    var successful = deleteEntry($(this).attr('id')); 
    if(successful == true){ 
     $(this).parent().parent().remove(); 
    }else{ 
     alert("Delete Unsuccessful."); 
    } 
}); 

在http://api.jquery.com/on/#direct-and-delegated-events查找jQuery的文檔的詳細信息。

Answer 3

您可以委派您的活動。

$(document).on('click', '.deleteButton', function(e){ 
    //do something 
}); 

這裏是一個類似的帖子，我在這裏解釋綁定live和「on」之間的區別。 How Jquery/Javascript behave on dynamic content updation?