javascript - 更新运行时添加的 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);

调试控制台提示说:“未捕获:无法在初始化之前调用进度条上的方法:试图调用方法‘value’”在这里谷歌搜索我发现问题可能与进度条的初始化有关在页面加载

有人可以帮我吗？

提前致谢

-- 编辑--

谢谢 Bryan，我正在尝试你的解决方案，但我不适合我

现在我有了这段代码

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

控制台说没有定义 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);

如您所见，我已经添加了一个控件，因为我已经多次检查该代码，所以已经有一个进度条。进度条每次都会更新，但控制台会提示说“TypeError:无法调用未定义的方法‘apply’”，所以我不得不添加带有空 catch 主体的 try block 来删除错误。该页面有效，但如果您知道为什么会出现该错误，它可能会很有趣

Answer 1

有同样的问题

显然你必须在第一次使用格式progressbar({value:30})

如果您第一次使用 progressbar(value,30)，则会出现此异常。