使用 .load() 后 jQuery 进度条消失答案

【问题标题】：jQuery progress bar disappears after using .load()使用 .load() 后 jQuery 进度条消失
【发布时间】：2013-11-26 04:02:58
【问题描述】：

我在我的网站上添加了进度条，它们在页面加载时可以正常工作。但是，我想使用 jQuery .load() 重新加载 div，在 div 重新加载后，进度条消失了，但一切似乎都运行良好。

以下是与我使用的代码类似的删节代码：

<script type="text/javascript">
  function updateDiv() {
    $("#foo-bar").load("http://sub.domain.tld/page.php");
  }
  setInterval("updateDiv()", 30000);

  $(document).ready(function() {
    $("#foo").progressBar(<?php echo $foo; ?>);
    $("#bar").progressBar(<?php echo $bar; ?>);
  });
</script>
<div id="foo-bar">
  <span id="foo"></span>
  <span id="bar"></span>
</div>

我从这里得到进度条源代码：http://t.wits.sg/misc/jQueryProgressBar/demo.php

所有 JavaScript/jQuery 代码均已正确包含，并且我在 Google Chrome 上检查了控制台，没有错误或警告。

就像我说的那样，在使用 .load() 重新加载页面之前一切正常，但我找不到问题所在。我认为该错误可能是跨域 JavaScript 问题，但 div 中的其他所有内容都加载得很好；这只是我遇到问题的进度条。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript php jquery ajax progress-bar

【解决方案1】：

因为您正在重新加载具有进度条元素的foo-bar 的内容，所以您必须在每次加载foo-bar 元素后重新初始化进度条

$(document).ready(function () {
    function progressBar() {
        $("#foo").progressBar( <? php echo $foo; ?> );
        $("#bar").progressBar( <? php echo $bar; ?> );
    }

    function updateDiv() {
        $("#foo-bar").load("http://sub.domain.tld/page.php", progressBar);
    }
    setInterval(updateDiv, 30000);
    progressBar()
});

【讨论】：

这非常适合重新加载进度条，但是，进度条的值没有改变。数据库中的实际值会更新，因为如果我自己回显变量而不是在 JS 中，它就可以工作。我还尝试将 PHP 变量放入警报中，但这也不起作用，所以我需要做些什么来将 PHP 值更新为 JS？

【解决方案2】：

<body>
    <div id='value'><?php echo 1123; ?></div>;
    <div id="progress"></div>
</body>

<script>
setInterval(function () {
  let vl = Number($("#value").text());
  $("#value").load(location.href+" #value>*","");  html tag is refresh
  $('#progress').progressbar({ value: vl }); this is very important
}, 5000);

$(function() { 
  $('#progress').progressbar({
    value: 13,
    max: 100
  });
});
</script>

$.load 在 jquery 进度条上不起作用

【讨论】：