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

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

有人可以帮我吗？

提前致谢

-- 编辑--

感谢 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块来删除错误。该页面有效，但如果您知道为什么会出现该错误，它可能会很有趣

Answer 1

遇到同样的问题

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

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

Answer 2

好吧，我不敢相信我错过了。问题是您将字符串传递给 setTimeout 函数。这将导致它在全局范围内查找函数的名称，而事实并非如此。

更改这两个调用：

setTimeout('updateProgress', 5000);

到

setTimeout(updateProgress, 5000);

Answer 3

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

在提供的代码中，您正在执行类似$(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')