更新在運行時添加的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他的例外。