javascript - 为什么我不能追加多次？ JQUERY 和 AJAX

Question

我正在制作一个将一些 Firebase 值加载到表中的网站，该网站是动态的。第一次单击订单按钮(在菜单中)时，值进入表中，但是当我转到另一个页面然后返回订单时，什么都没有出现...

我测试过在订单页面中放置一个按钮，每次我按下它都有效...

第一次按下菜单上的按钮:https://gyazo.com/fb111288b899c00db0fbf06da06130ce

第二次按下按钮:https://gyazo.com/7154bf7d7ac08de514b5083239424a35

这是 JavaScript:

$('#dynamic').on('click', 'a', function (e) {
      e.preventDefault();
      $("#dynamic").load($(this).attr("href"), function () {});
      if ($(this).attr("href") == "orders.html") {
        var rootRef = firebase
          .database()
          .ref()
          .child("Orders");

        rootRef.on("child_added", snap => {
          var ID = snap.child("ID").val();
          var ArticleNumber = snap.child("ArticleNumber").val();
          var ArticleName = snap.child("ArticleName").val();
          var Quantity = snap.child("Quantity").val();
          var Price = snap.child("Price").val();
          var Description = snap.child("Description").val();
          var Status = snap.child("Status").val();

          $("#table_body").append("<tr><td>" + ID + "</td><td>" + ArticleNumber + "</td><td>" + ArticleName + "</td><td>" + Quantity + "</td><td>" + Price + "</td><td>" + Description + "</td><td>" + Status + "</td></tr>");
          $(".waiting").css("display", "none");
          $("#table-wrapper").css("display", "block");
          $(".dataTitle").css("display", "block");
        });
      });

这是 Html:

<div class="waiting">
  <img id="doneLoading" class="logo" src="img/waiting.svg" alt="Waiting" />
  <p id="loadOrders" class="text">Loading data from Firebase...</p>
</div>
<h1 style="display: none;" class="dataTitle">Firebase Data</h1>
<div style="display: none;" id="table-wrapper">
  <div id="table-scroll">
    <table class="content-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Article Number</th>
          <th>Article Name</th>
          <th>Quantity</th>
          <th>Price</th>
          <th>Description</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody id="table_body"></tbody>
    </table>
  </div>
</div>

同样在控制台中，它说它正在执行 JavaScript，但什么也没有出现...

Answer 1

似乎是第一个 if... 的问题从拍摄来看，似乎第二次代码没有进入此 block 。您是否使用 brackpoint 测试了开发者工具(例如 Chrome 开发者工具)中的流程？

if ($(this).attr("href") == "orders.html") {