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按鈕創建時設置一個事件偵聽器。