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

Question

I am making a website that load in some Firebase values to a table, the website is dynamic. First time when i click the orders button (in the menu) the values get in the table but when i go to a different page and then going back to orders nothing apears...

I tested to place a button inside the orders page and every time i press that it works...

First time pressed the button on menu: https://gyazo.com/fb111288b899c00db0fbf06da06130ce

second time pressed the button: https://gyazo.com/7154bf7d7ac08de514b5083239424a35

Here is the 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");
        });
      });

And here is the 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>

also in the console it says it is doing the JavaScript but nothing appears...

Answer 1

Seems to be a problem with the first if... From the shoot, seems that the second time the code not entering in this block. Have you tested the flow in the developer tools (ex Chrome developer tool) with brackpoint?

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