javascript/firebase - 使用 for 循环触发时，按钮类不起作用

Question

我在 JavaScript 上有一个从 firebase 表中获取数据的函数。获取的数据将附加到我的 HTML 中的 <tbody>。当按钮（作为弹出模式开启器）正常使用 HTML 生成时，按钮按预期工作（即使创建了它的多个实例），但是当它使用脚本生成时，它无法工作，即使如果使用单个按钮。

modal.js：

var modals = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("openmodal");
var spans=document.getElementsByClassName("close");
for(let i=0;i<btns.length;i++){
   btns[i].onclick = function() {
      modals[i].style.display = "block";
   }
}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
       modals[i].style.display = "none";
    }
 }

reportsTable.js（用于获取数据，并将其附加到表中）

function reportsTable() {
  var rootRef = firebase.database().ref().child("reports");
  rootRef.on("value", snap => {
    $("#table_body").html("");
    snap.forEach(snap => {
      var Category = snap.child("Category").val();
      var Dates = snap.child("Date").val();
      var Location = snap.child("Location").val();
      var Report = snap.child("Report").val();
      var Status = snap.child("Status").val();
      $("#table_body").append("<tr><td>" + Category + "</td><td>" + Dates + "</td><td>" + Location + "</td><td>" + Report + "</td><td>" + Status + "</td><td>" +
        "<button class='openmodal myBtn'>View</button>" +
        "<div class='modal myModal'>" +
        "<div class='modal-content'>" +
        "<span class='close'>&times;</span>" +
        "<p>Report Category: " + Category + " </p>" +
        "<p>Report Date: " + Dates + " </p>" +
        "<p>Location: " + Location + " </p>" +
        "<p>Report Details: " + Report + " </p>" +
        "<p>Report Status: " + Status + " </p>" +
        "</div>" +
        "</div></td></tr>")
    })
  });
}

HTML：

<div class="card-body">
            <div class="table-responsive">
              <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                  <tr>
                    <th>Category</th>
                    <th>Date</th>
                    <th>Location</th>
                    <th>Report</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>Category</th>
                    <th>Date</th>
                    <th>Location</th>
                    <th>Report</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </tfoot>
                <tbody id="table_body">
                  <tr>
                    <td>
                      <button class="openmodal myBtn">Open Modal</button>
                      <div class="modal myModal">
                        <div class="modal-content">
                          <span class="close">&times;</span>
                          <p>Some text in the Modal..</p>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

我尝试在我的按钮中添加onclick 函数，但它仍然不会触发弹出窗口。我的代码中是否缺少任何内容？

Answer 1

在调用 reportsTable 后尝试再次初始化 modal.js 时，它对我有用：

function refreshmodal(){
    //modal.js content
}
function reportsTable(){
    //.......codes
    refreshmodal();
}

Answer 2

我意识到我的错误实际上是由 modal.js 文件在reportsTable 函数完成触发之前先完成引起的。我的解决方法是删除 modal.js 文件，将其内容放在 reportsTable.js 文件中的函数中，然后每 1000 毫秒调用一次该函数。

window.onload = reportsTable();
window.setInterval(function(){
  modalSpawner();
}, 1000);

Answer 3

1-为openmodal按钮点击写一个函数：

function showModal(btn){         
    btn.parentElement.getElementsByClassName("modal")[0].style.display = "block";
}

2- 编写一个关闭按钮点击的函数：

function hideModal(btn){         
    btn.closest(".modal").style.display = "none";
}

3- 用于在 openmodal 按钮和关闭按钮上内联 onclick：

<button class="openmodal myBtn" onclick="showModal(this);">Open Modal</button> 

<span class="close" onclick="hideModal(this);>&times;</span>

注意：这种方式不需要等待加载文档或刷新表