jQuery的按鈕點擊不工作後追加

Question

我有一個網頁查詢數據庫，並通過jQuery發回數據到一個HTML表格。通過將數據附加到HTML表格，我可以成功返回結果，同時在每個返回的行上添加一個「添加到播放列表」按鈕，以便在需要時將該行中的數據發送到另一個頁面。

單擊此按鈕時，我的網站上沒有任何反應（如果數據存儲在jQuery變量中，我將它設置爲提醒我）。我已經測試了JSfiddle和it works there 的基本功能，所以我認爲tr.append的工作方式肯定有問題？或者我錯過了.on函數更明顯的東西？

jQuery代碼，從數據庫返回的數據：

function (data) { 
for (var i = 0; i < data.length; ++i) { 
    var tr = $('<tr/>'); 
    tr.append("<td class='artist'>" + data[i].ARTIST + "</td>"); 
    tr.append("<td class='title'>" + data[i].TRACKTITLE + "</td>"); 
tr.append("<td>" + "<button class='send' type='submit'>Add to playlist!</button>" + "</td>"); 

$('#table').append(tr); 
}  

jQuery代碼，在返回的行並將找到的數據變量

$(function(){ 
    $('button').on('click', function(){ 
    var tr = $(this).closest('tr'); 
    var title = tr.find('.title').text(); 
    var artist = tr.find('.artist').text(); 
    alert('title: '+title+', artist: ' + artist); 
}); 
}); 

Answer 1

你可以做這樣的事情使用event delegation，

$(function(){ 
    $('#table').on('click','button', function(){ 
    var tr = $(this).closest('tr'); 
    var title = tr.find('.title').text(); 
    var artist = tr.find('.artist').text(); 
    alert('title: '+title+', artist: ' + artist); 
    }); 
}); 

Answer 2

將元素動態添加到文檔時，請使用。 on()'s delegated event handler syntax：

$('#table').on('click', 'button', function(){