當另一個腳本重新加載頁面時，jQuery腳本停止工作

Question

我有這個HTML：

<td>
  <div class="status">1</div>
  <span class="fa fa-times-circle" aria-hidden="true"></span>
</td>

我有這個腳本：

<script>
  $('.status:contains("1") + span').removeClass('fa-times-circle').addClass('fa-sun-o');
</script>

該腳本基本上根據div 1或0的文本刪除和添加類。但是，該腳本僅工作10秒鍾，然后恢復為顯示fa-times-circle的默認類。 當另一個腳本（請參見下文）每隔10秒重新加載一次數據時，它將停止。

<script>
  (function updateStafftable() {
    $.get('sql/staff-status.php', function(data) {
      $('.table-staffs').html(data);
      setTimeout(updateStafftable, 10000);
    });
  })();
</script>

你們知道為什么嗎？ 另外，我想指出的一個重要細節是，我一開始提到的html位於“ staff-status.php”中，它每10秒間隔重新加載一次。 我只是不明白為什么會這樣。

Answer 1

您的方法不好，但是如果您希望通過最小的更改來實現目標，則將該腳本成功執行ajax調用

<script>
  (function updateStafftable() {
    $.get('sql/staff-status.php', function(data) {
      $('.table-staffs').html(data);
      $('.status:contains("1") + span').removeClass('fa-times-circle').addClass('fa-sun-o');
      setTimeout(updateStafftable, 10000);
    });
  })();
</script>

更好的方法

通過將if條件根據狀態分配給類來編輯staff-status.php的邏輯

   ...    
   if($status == 1){
     $class= 'fa-sun-o';
    }else{
     $class= 'fa-times-circle';
    }
    ....
    <td>
      <div class="status">$status</div>
      <span class="fa $class" aria-hidden="true"></span>
    </td>
    ....