jQuery on button click not working after append

Question

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

Not again! Use delegated event handlers ?

adeneo
– adeneo

2014-01-07 17:18:08 +00:00
Commented Jan 7, 2014 at 17:18 — adeneo
– adeneo, Commented Jan 7, 2014 at 17:18

Pranav C Balan · Accepted Answer · 2016-01-20 04:45:57Z

9

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

edited Jan 20, 2016 at 4:45

answered Jan 7, 2014 at 17:18

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reinstate Monica Cellio Over a year ago

+1, but use the selector #table instead of document. You should ideally pick the closest container element.

j08691 · Accepted Answer · 2014-02-24 14:07:07Z

3

When dynamically adding elements to a document, use .on()'s delegated event handler syntax:

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

edited Feb 24, 2014 at 14:07

answered Jan 7, 2014 at 17:18

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

jQuery on button click not working after append

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related