当另一个脚本重新加载页面时，Jquery 脚本停止工作答案

【问题标题】：Jquery script stops working when another script reload page当另一个脚本重新加载页面时，Jquery 脚本停止工作
【发布时间】：2017-05-09 06:01:51
【问题描述】：

我有这个 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 秒间隔重新加载一次。我只是不明白为什么会这样。

【问题讨论】：

取决于 table-staffs 类的内容。基本上，据我所知，你就像一个把墙壁涂成蓝色的画家。但每隔 10 秒，就会有另一位画家走过来，将墙壁涂成白色，无论之前是什么。然后你问为什么 10 秒后墙是白色的，这让我觉得你需要先弄清楚你的逻辑。
可能会在这个关于“table-staffs”表的问题中添加更多内容。如果那是
1
的父级，那么它将替换它...从而恢复您的更改
有趣的是 JavaScript 如何与 html 结合使用。当我在正在重新加载的页面中包含脚本时，问题解决了。
仍然不知道问题是什么以及您是如何解决的。

标签： javascript jquery

【解决方案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>

更好的方法

编辑staff-status.php 中的逻辑，通过设置if 条件来根据状态分配类

   ...    
   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>
    ....

【讨论】：

太棒了！谢谢尼尔马尔。