0

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.

Link

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>
    `)
  });
});
Louys Patrice Bessette
  • 27,837
  • 5
  • 32
  • 57
Ashish Subedi
  • 43
  • 1
  • 6
  • 1
    guessing it is dynamic? https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – epascarello Jan 29 '19 at 17:22
  • Could you not avoid the problem entirely by just using a class selector? – Rory McCrossan Jan 29 '19 at 17:31
  • **What do you espect? You replace the whole table row, including the buttons. The replaced buttons of course don't have an event listener attached.** – connexo Jan 29 '19 at 17:41
  • @RoryMcCrossan Still it changes the html for first time dissaprove button is clicked. When approve button is clicked, nothing happens. – Ashish Subedi Jan 29 '19 at 17:42
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Louys Patrice Bessette Jan 29 '19 at 18:02
  • Use [delegation](https://learn.jquery.com/events/event-delegation/): `$("some-static-container-selector").on("click","[id|='disapproveBtn']",function (e) {` – Louys Patrice Bessette Jan 29 '19 at 18:07

2 Answers2

0

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) {

Jordan Robinson
  • 82
  • 6
0

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.

RobertAKARobin
  • 3,282
  • 1
  • 20
  • 34