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(){

添加后按钮上的jQuery点击不起作用

2 个答案: