为什么我不能多次 append？ JQUERY 和 AJAX

Question

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

我测试在订单页面内放置一个按钮，每次按下它都可以工作......

第一次按下菜单上的按钮： 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") {