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按钮创建时设置一个事件侦听器。