jQuery индикатор выполнения исчезает после использования .load()

Question

Я добавил индикаторы выполнения на свой сайт, и они отлично работают при загрузке страницы. Тем не менее, я хочу перезагрузить div, используя jQuery .load(), и после того, как 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, который имеет элементы управления ProgressBar, вам придется повторно инициализировать прогрессбар после каждой нагрузки 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() 
});