Почему я не могу добавить несколько раз? 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 ... С момента съемки кажется, что второй раз код не вводится в этот блок. Вы тестировали поток в инструментах разработчика (бывший инструмент разработчика Chrome) с помощью brackpoint?

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