jQuery: Clicking button doesn't trigger event

Question

I am trying to change the row of the table according to the button clicked. The row changes for the first time button is clicked, but after that row value doesn't change. Also, the event listner is removed after button changes.

HTML:

<% if(post.status === 1){ %>
  <input type="button" class="btn btn-danger" value="Disapprove"    id="disapproveBtn-<%= i %>">
  <input type="button" class="btn btn-primary" value="Send to Moderation" id="moderateBtn-<%= i %>">
<% } %>

jQuery:

$("[id|='disapproveBtn']").click(function (e) {
  console.log("CLICKED");
  var trIndex = $(this).closest('tr').index();
  var tr = $(this).closest('tr');
  var postId = $(this).closest('tr').find("#postId").text().trim();
  $.post('/admin/disapprove/' + postId, (data) => {
    console.log(tr);


    console.log(data);
    tr.html(`
      <td>
        ${data.post.firstName}
      </td>

      <td>
        ${data.post.lastName}
      </td>

      <td>
        ${data.post.userId}
      </td>

      <td>
        <div id="postId">
          ${data.post.id}
        </div>
      </td>
      <td>
        <a href="/profile/post/${data.post.id}">Here</a>
      </td>

      <td>
        ${data.post.status}
      </td>

      <td>
        <input type="button" class="btn btn-success" value="Approve" id="approveBtn-${trIndex}">
        <input type="button" value="Send to Moderation" class="btn btn-primary" id="moderateBtn-${trIndex}">
      </td>
    `)
  });
});

Answer 1

Due to reputation I can't make this a comment it looks like you have a dynamic id

disapproveBtn-<%= i %>

Your event listener is looking at disapproveBtn not each individual one

<% if(post.status === 1){ %>
<input type="button" class="btn btn-danger disapproveButton" value="Disapprove"    id="disapproveBtn-<%= i %>">
<input type="button" class="btn btn-primary" value="Send to Moderation" id="moderateBtn-<%= i %>">

and then alter your event listener to be $(".disapproveButton").click(function (e) {

Answer 2

I want to be clear on what you're expecting:

1. The user clicks the disapprove button inside a table row
2. The row changes, and should now contain an approve button
3. The user clicks the approve button, and something happens

The reason nothing happens when they click the approve button is that all your event listeners are created when the page first loads . The approve button is created after the page loads, and so it does not have an event listener.

I would recommend that you always have an 'approve' button in each row when the page loads, but just hide it with CSS ( display:none ) until the disapprove button has been clicked.

Otherwise, you will need to set an event listener on each approve button when it is created.