jQuery在按钮点击后不起作用 [英] jQuery on button click not working after append

问题描述

我有一个网页查询数据库并通过jQuery将数据发送回HTML表格。我可以通过将数据附加到HTML表格来成功返回结果，同时在每个返回的行上添加一个'添加到播放列表'按钮，用于在需要时将该行中的数据发送到另一个页面。

单击此按钮时，我的网站上没有任何事情发生（我已经设置它来提醒我数据是否存储在jQuery变量中）。我已经在JSfiddle和它在那里工作
测试了基本函数，所以我认为必须有一个问题的方式 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> +< / td>+< / td>）< button class ='send'type ='submit'> Add to playlist！ ; 
 
 $（'＃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）; 
}）; 
}）; 
  
 
 
解决方案
您可以使用 a href =http://api.jquery.com/on/#direct-and-delegated-events =nofollow>活动代表团 ， 
 $（$'$ $ $ $ $ $ $ $ $ $'$ $ $ $ $ $ $'$'$ $ $ $ $'$'$'$'$'$' $ b var tr = $（this）.closest（'tr'）; 
 var title = tr.find（'。title'）。text（）; 
 var artist = tr.find（' .artist'）。text（）; 
 alert（'title：'+ title +'，artist：'+ artist）; 
}）; 
}）; 
  

I have a web page that queries a database and sends back data via jQuery to an HTML table. I can successfully return results by appending that data to the HTML table, whilst also adding an 'Add to playlist' button on each returned row that is intended to send the data in that row to another page if needs be.

On click of this button, nothing happens on my site (i've set it up to alert me if data is stored in the jQuery variable). I've tested the basic functions in JSfiddle and it works there so I figured there must be a problem with the way tr.append works? Or am I missing something even more obvious with the .on function?

jQuery code that returns data from database:

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 code that finds data in returned row and stores to variables

$(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);
});
});

解决方案

You can do something like this using 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);
   });
});

这篇关于jQuery在按钮点击后不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！