jQuery：单击按钮不会触发事件

Question

我正在尝试根据单击的按钮更改表格的行。第一次单击按钮时行更改，但在那之后行值不会更改。此外，事件侦听器会在按钮更改后被移除。

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

由于声誉问题，我无法对此发表评论，看起来你有一个动态 id

disapproveBtn-<%= i %>

您的事件侦听器正在查看 disapproveBtn 而不是每个人

<% 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 %>">

然后将您的事件侦听器更改为 $(".disapproveButton").click(function (e) {

Answer 2

我想清楚你的期望：

1. 用户单击表格行内的disapprove 按钮
2. 行发生变化，现在应该包含一个approve 按钮
3. 用户点击approve按钮，发生了一些事情

当他们单击approve 按钮时没有任何反应的原因是您的所有事件侦听器都是在页面首次加载时创建的。 approve 按钮是在页面加载后创建的，因此它没有事件监听器。

我建议您在页面加载时始终在每一行中都有一个“批准”按钮，但只需使用 CSS (display:none) 将其隐藏，直到单击 disapprove 按钮。

否则，您需要在创建每个approve 按钮时为其设置一个事件侦听器。