Appending a row with a button is not detected with jQuery [button.class]

Question

Alright so I basically have a table that is drawn by PHP for every row. Within the row, I have data and a "delete" button to delete the specific row.

<?php
   if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo "<tr class='btnDelete' data-id=" . $row["username"]. "><td>" . $row["id"]. "</td><td>" . $row["username"]. "</td><td><span class='label label-success'>" . $row["active"]. "</span></td><td><button class='btn btn-danger btnDelete btn-xs' href=''>delete</button></td></tr>";
     }
}   
?>

To delete the row, I have a script to show a modal when the button is clicked, using data-id as shown below.

        $('button.btnDelete').on('click', function (e) {
            e.preventDefault();
            var id = $(this).closest('tr').data('id');
            $('#myModal').data('id', id).modal('show');
            $('#modaltitle').text('User ID: ' + id);    
        });

However, the question is: when I append to the table using jQuery, the row is shown and added to the database correctly, but the delete button does not bring up the modal to delete the row. It will only delete when the page is refreshed.

From the source, the code of the appended row looks ok to me.

Finally, here's the source for the appended row.

        $('#btnAdd').click(function () {
            var user = $('#user').text();
            var newuser = $('#txtUserAdd').val().toLowerCase();
            var dataString = 'user='+ user.toLowerCase() + '&user2=' + newuser;
           $.ajax({
           type: "POST",
           url: "../adduser.php",
           data: dataString,
           cache: false,
           success: function(result){
           console.log(result);
           $('#userlist tr:last').after("<tr class='btnDelete' data-id="+ newuser + "><td>ID</td><td>" +newuser+ "</td><td><span class='label label-success'>Active</span></td><td><button class='btn btn-danger btnDelete btn-xs' href=''>delete</button></td></tr>");
            }
            });
        });

Help is much appreciated, let me know if you need more info.

That helped a lot, will add an answer to it now that fixed it. Thank you! — Aotik, Apr 06 '15 at 16:54

score 0 · Accepted Answer · answered Apr 06 '15 at 16:55

Changed button event to:

$("#datatable").on("click", "button", function(event){
            event.preventDefault();
            var id = $(this).closest('tr').data('id');
            $('#myModal').data('id', id).modal('show');
            $('#modaltitle').text('User ID: ' + id);    
        });

where:

<tbody id="datatable">

Appending a row with a button is not detected with jQuery [button.class]

1 Answers1