javascript - 引导弹出窗口内元素的 document.querySelector

Question

我想在弹出框内选择元素并创建 ajax get call on click。我无法首先选择元素。

<table class="table">
  <tbody>
  <tr>
    <td></td>
    <td>2016-06-06</td>
  </tr>
    <tr>
      <td>Worker 1</td>
      <td id="worker1_date1">8h</td>
    </tr>
  </tbody>
</table>

$("#worker1_date1").popover({
    html: true,
    content:" <span>Task 1: 6h. Approved: False <button id='btn_worker1_date1' class='btn btn-success btn-sm'>Approve</button></span> <span>Task 2: 2h. Approved: True <button id='btn_worker1_date2' class='btn btn-danger btn-sm'> Disapprove</button></span>",
});

// This works
document.querySelector("#worker1_date1").textContent = "Modified Text"

// This does not work
document.querySelector("#btn_worker1_date1").textContent = "Modified Text"

小提琴https://jsfiddle.net/mzw87oqv/1/

Answer 1

仅当您单击它附加到的元素时，弹出框才会将其 HTML 添加到 DOM。所以当你运行时document.querySelector("#btn_worker1_date1").textContent = "Modified Text"，带有 ID 的元素#btn_worker1_date1在 DOM 上不存在，因此无法更改。

您可以通过侦听显示弹出框时触发的事件来解决此问题。

popover.on('shown.bs.popover', () => {
   document.querySelector("#btn_worker1_date1").textContent = "Modified Text";
});

见修改示例