How to add a button using jQuery?

Question

Im using ajax to render a table on my page. In the last row of the table Im trying to display a button which is handling my "edit" function like so:

$(".editPersonnel").on("click", function () {
$("#editPersonnelModal").modal("show");
$tr = $(this).closest("tr");

var data = $tr
  .children("td")
  .map(function () {
    return $(this).text();
  })
  .get();

$("#idPer").val(data[0]);
$("#updateLastName").val(data[1]);
$("#updateFirstName").val(data[2]);
$("#updateJobTitle").val(data[3]);
$("#updateEmail").val(data[4]);
$("#updateDepartment").val(data[5]);
$("#updateLocation").val(data[6]);
console.log(data);

});

Im trying to render that button using jQuery but when I do this:

 $("<td>").html(
             '<td><button class="btn btn-info editPersonnel">Edit</button>'
            )

the button shows on the page but doesn't work. Can anyone help me to solve this problem? Im still such a newbie... Thanks!

Side Note: you have an extra leading `` when trying to append to a `` — charlietfl, Apr 17 '21 at 20:25

score 0 · Accepted Answer · answered Apr 17 '21 at 20:22

0

You can use event delegation since the elements are dynamically created.

// Replace document with nearest static parent/ancestor, if possible
$(document).on("click", ".editPersonnel", function (){
   // ...
});

answered Apr 17 '21 at 20:22

Unmitigated

76,500
11
62
80

That reads the data but the modal still doesn't show for some reason? – Chi Chi Huang Apr 17 '21 at 20:28
Or maybe it shows but its under my current modal. Ill be back in a sec! – Chi Chi Huang Apr 17 '21 at 20:29
1

Yep, that works, modal shows under opened modal! Thanks for help! – Chi Chi Huang Apr 17 '21 at 20:37
@ChiChiHuang Glad to help. – Unmitigated Apr 17 '21 at 20:37

How to add a button using jQuery?

1 Answers1