更新在运行时添加的JQuery进度栏

Question

我在更新jQuery进度条时遇到了一些问题。该进度条是不是页面加载时的文档中，我加入它只是当一个按钮，用户点击，丁是这样的：

$(this).parent().append('<div class="progressbar"></div>'); 
$(this).parent().children('div.progressbar').show(); 
$(this).parent().children('div.progressbar').progressbar({value: 20}); 

然后，使用超时，我想更新它

function updateProgressBar() { 
    $('.progressbar').each(function() { 
     myNewValue = getNewValue(); 
     $(this).progressbar('value', 50); 
    }); 
    setTimeout('updateProgressBar()', 5000); 
} 
setTimeout('updateProgressBar()', 5000); 

调试控制台抱怨说：“未捕获：不能调用进度的方法来initialiaztion之前：试图调用方法‘价值’” 谷歌搜索在这里我发现，问题可能涉及到inizialization进度条后加载页面

有人可以帮我吗？

在此先感谢

- 编辑 -

感谢布莱恩，我想你的解决方案，但我不能为我工作

现在我已经这个代码

function startProgress() { 

    $(this).parent().append('<div class="progressbar"></div>'); 
    $(this).siblings('.progressbar').show(); 
    $(this).siblings('.progressbar').progressbar({value: 0}); 

    function updateProgress() { 
     $('.progressbar').each(function() { 
      myNewValue = getNewValue($(this).parent().parent().attr('id')); 
      $(this).progressbar('value', myNewValue); 
     }); 
     setTimeout('updateProgress', 5000); 
    } 
    setTimeout('updateProgress', 5000); 
} 

The console is sayng there's no updateProgress defined

- edit -

很多很多谢谢！

现在我的作品相当明确的版本...

这里我当前的代码

if($(this).siblings('.progressbar').size() == 0) { 
     $(this).parent().append('<div class="progressbar"/>'); 
     $(this).siblings('.progressbar').progressbar({value: 0}); 
} 
$(this).siblings('.progressbar').show(); 

function updateProgress() { 
    $('.progressbar').each(function() { 
     myParams = 'service=' + $(this).parent().parent().attr('id') + '&content=' + $(this).parent().attr('id') 
     myUrl = '/datacast/content_progress/?' + myParams; 
     theValue = $(this).progressbar('value'); 
     $.get(myUrl, {}, function(aReply) { 
      myData = aReply.split(' '); 
      myItemId = myData[0]; 
      myValue = parseInt(myData[1]); 
      try { 
       $(".item[id = " + myItemId + "]").children(".progressbar").progressbar('value', myValue); 
      } 
      catch(myError) { 
       //alert(myError); 
      } 
     }) 
    }); 
    setTimeout(updateProgress, 5000); 
} 
setTimeout(updateProgress, 5000); 

正如你可以看到我已经添加了一个控件，如果已经有一个进度条我多次通过该代码。 进度条每次更新，但控制台笙歌说：“类型错误：无法调用‘应用’未定义”，所以我不得不用空卡位体加入try块砸错误。该网页的工作，但如果你有一个想法，为什么有这个错误

Answer 1

确保您使用的是您的更新方法完全相同的选择作为初始化方法也可能是有趣的。

在提供的代码中，您正在执行的操作类似$(this).parent().children().find('.progressbar')，然后在更新中您只是在执行$('.progressbar')。第二次调用可能会返回第一次没有的项目，并且这些项目不会有进度栏初始化。

此代码工作对我罚款：

$(function(){ 
    $('body').append('<div class="progress"></div>'); 

    var val = 10; 
    $('.progress').progressbar({value:val}); 

    function updateProgress() { 
     val += 10; 
     $('.progress').progressbar('value', val); 
     if(val < 100) 
      setTimeout(updateProgress, 1000); 
    } 

    setTimeout(updateProgress, 1000); 
}); 

另外，请记住，你实际上并不需要的是调用each()为jQuery方法应该自动适用于与选择匹配的所有元素。

实施例：

$('.red').each(function(){ $(this).css({color:'red'}); });

是多余的，并且同样可以用以下步骤实现：

$('.red').css({color:'red'});

哦，和这里的一个免费赠品：

$(this).parent().children().find('.progressbar')

可以缩短为：$(this).siblings('.progressbar')

Answer 2

好吧，我不能相信我错过了。问题是你正在向setTimeout函数传递一个字符串。这将导致它在全局范围内查找函数的名称，而不是。

更改这两个呼叫：

setTimeout('updateProgress', 5000); 

到

setTimeout(updateProgress, 5000); 

Answer 3

有同样的问题

显然，你必须使用第一次

如果您使用的格式progressbar({value:30})progressbar(value,30)第一次你得到t他的例外。