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

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

我试着在订单页面中放置一个按钮，每次我按下按钮，它都能工作

第一次按下菜单上的按钮：

第二次按下按钮：

下面是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");
        });
      });

$（'#dynamic'）。在（'click'，'a'，函数（e）上{
e、 预防默认值（）；
$（“#dynamic”）.load（$（this.attr（“href”），function（）{}）；
if（$（this.attr（“href”）=“orders.html”）{
var rootRef=firebase
.数据库（）
.ref（）
.儿童（“命令”）；
rootRef.on（“添加的子对象”，snap=>{
var ID=snap.child（“ID”）.val（）；
var ArticleNumber=snap.child（“ArticleNumber”）.val（）；
var ArticleName=snap.child（“ArticleName”）.val（）；
var数量=snap.child（“数量”）.val（）；
var Price=snap.child（“Price”）.val（）；
var Description=snap.child（“Description”）.val（）；
var Status=snap.child（“Status”）.val（）；
$（“#表体”）。追加（“+ID+”“+ArticleNumber+”“+ArticleName+”“+Quantity+”“+Price+”“+Description+”“+Status+”）；
$（“.waiting”）.css（“显示”、“无”）；
$（“#表包装器”）.css（“显示”、“块”）；
$（“.dataTitle”）.css（“显示”、“块”）；
});
});

以下是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>

正在从Firebase加载数据
火基数据
身份证件
物品编号
物品名称
量
价格
描述
地位

---

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

第一次似乎有问题，如果…从拍摄开始，第二次代码似乎没有进入该块。 您是否使用brackpoint测试了开发者工具（ex Chrome开发者工具）中的流程

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

---

如果我删除这一行，它仍然不起作用：（我不知道如何使用上面提到的chrome开发者工具。而且它正在进入代码块，当我在其中添加控制台日志时，我会得到一个响应CDT是一个强大的工具来调试你的应用程序…需要用chrome打开页面（例如，Firefox有类似的工具），>F12>选项卡“Sources”在此，选择包含代码的JS文件，在行号附近设置断点，靠近if代码…重新加载页面，调试已开始。要继续，请按F10。要关闭调试，请删除所有括号点…非常有帮助。我发现了一些新内容，在<代码>$（“#table_body”）之前一切都很好.append。我在断点控制台中获得了正确的值，但该表没有显示…看起来脚本正在尝试在加载页面之前将值添加到表中查看chrome开发工具之后，看起来它正在尝试在加载页面之前将值添加到表中。。。