Javascript 更新运行时添加的JQuery进度条

我在更新jquery进度条时遇到一些问题。此进度条在页面加载期间不在文档中，我只是在用户单击按钮时添加它，如下所示：

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

调试控制台抱怨说：“未捕获：无法在初始化之前调用progressbar上的方法：尝试调用方法‘值’” 在这里搜索我发现问题可能与加载页面后进度条的日化有关

有人能帮我吗

提前谢谢

--编辑--

谢谢布莱恩，我正在尝试你的解决方案，但我不为自己工作

现在我有了这个代码

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

函数startProgress（）{
$（this.parent（）.append（“”）；
$（this.sides（'.progressbar'）.show（）；
$（this.sides（'.progressbar'）.progressbar（{value:0}）；
函数updateProgress（）{
$（'.progressbar'）。每个（函数（）{
myNewValue=getNewValue（$（this.parent（）.parent（）.attr（'id'））；
$（this）.progressbar（'value'，myNewValue）；
});
setTimeout（'updateProgress'，5000）；
}
setTimeout（'updateProgress'，5000）；
}

控制台说没有定义updateProgress

--编辑--

非常感谢

现在我有了一个非常确定的版本，它可以工作

这是我当前的代码

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);

if（$（this）.sides（'.progressbar'）.size（）==0）{
$（this.parent（）.append（“”）；
$（this.sides（'.progressbar'）.progressbar（{value:0}）；
}
$（this.sides（'.progressbar'）.show（）；
函数updateProgress（）{
$（'.progressbar'）。每个（函数（）{
myParams='service='+$（this.parent（）.parent（）.attr（'id'）+'&content='+$（this.parent（）.attr（'id'））
myUrl='/datacast/content_progress/？'+myParams；
value=$（this.progressbar（'value'）；
$.get（myUrl，{}，函数（aReply）{
myData=aReply.split（“”）；
myItemId=myData[0]；
myValue=parseInt（myData[1]）；
试一试{
$（“.item[id=“+myItemId+”]）。子项（“.progressbar”）.progressbar（'value'，myValue）；
}
捕获（myError）{
//警报（myError）；
}
})
});
设置超时（updateProgress，5000）；
}
设置超时（updateProgress，5000）；

正如您所看到的，我已经添加了一个控件，如果已经有了一个进度条，那么我将多次遍历该代码。

---

进度条每次都会更新，但控制台抱怨说“TypeError:无法调用undefined的'apply'方法”，因此我不得不添加带有空catch body的try块来删除错误。该页面可以正常工作，但如果您知道出现错误的原因，可能会很有趣

请确保在更新方法中使用的选择器与在初始化方法中使用的选择器完全相同

在提供的代码中，您正在执行类似于

$（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);
});

$（函数（）{
$（'body'）。追加（''）；
var=10；
$（'.progress'）.progressbar（{value:val}）；
函数updateProgress（）{
val+=10；
$（'.progress'）.progressbar（'value'，val）；
如果（val<100）
设置超时（updateProgress，1000）；
}
设置超时（updateProgress，1000）；
});

另外，请记住，实际上并不需要调用

each（）

，因为jquery方法应该自动应用于与该选择器匹配的所有元素

例如：

$（'.red'）.each（function（）{$（this.css（{color:'red'}）；}）

是冗余的，可通过以下方式实现：

$（'.red'）.css（{color:'red'}）

哦，这是一个免费赠品：

$（this.parent（）.children（）.find（'.progressbar'）

可以缩短为：
$（this）.兄弟姐妹（'.progressbar'）
好的，我真不敢相信我错过了。问题是您正在向setTimeout函数传递字符串。这将导致它在全局范围内查找函数的名称，但它不是

更改这两个调用：

setTimeout('updateProgress', 5000);

到

我也有同样的问题

显然，您必须第一次使用格式
progressbar（{value:30}）

如果第一次使用
progressbar（值，30）
，则会出现此异常
 你正在使用的插件是什么？我正在使用jquery-1.4.2.js和jquery UI Progressbar 1.7.2Checkout下面是我的新答案。我发布了一个新答案，请检查它。这有点毛茸茸的。你能发布一些本该使用的HTML示例吗？谢谢！现在它可以工作了，即使在我找不到的地方出现了错误，也可以查看我的上一次编辑。对象表示法实际上看起来像progressbar（{value:30}）。我只是在Firefox中遇到了这个问题，并且这个更改起到了作用。
setTimeout('updateProgress', 5000);

setTimeout(updateProgress, 5000);