Question

我已经为我的网站添加了进度条，并且在页面加载时它们可以正常工作。但是，我想使用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中的其他所有东西都加载完美;这只是我遇到问题的进度条。

非常感谢任何帮助。

Answer 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()
});

Answer 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 进度条上不起作用

使用.load（）后jQuery进度条消失

2 个答案: