So here's the scoop - I've got a page with an animated progress bar in it here:
所以这是独家新闻 - 我在这里有一个带有动画进度条的页面:
http://bushidodesigns.net/consumer/webapp/funnel/receipts.htm
The script that animates the bar looks like this:
为该栏设置动画的脚本如下所示:
function run() {
var obj = document.getElementById('p1');
if (obj.getAttribute("data-value") < 100) {
obj.setAttribute("data-value", parseInt(obj.getAttribute("data-value")) + 5);
obj.setAttribute('aria-valuenow', obj.getAttribute("data-value"));
obj.style.width = obj.getAttribute("data-value") + "%";
}
And I'm firing it on page load like so:
而且我在页面加载上触发它,如下所示:
<body class="step" onLoad="run()">
That works fine. But what I'm trying to do is put the progress bar in an external file, and load it into the page when the user clicks a link like this:
这很好。但我想要做的是将进度条放在外部文件中,并在用户单击如下链接时将其加载到页面中:
$(document).on('click','#load-email',function() {
$("article").load("../loaders/email.htm");
run();
});
When I do that, the progress bar loads into the page, but it loads at 100%, doesn't animate, and throws this error - "TypeError: obj is null if (obj.getAttribute("data-value") < 100) {"
当我这样做时,进度条加载到页面中,但它加载为100%,没有动画,并抛出此错误 - “TypeError:obj为null if(obj.getAttribute(”data-value“)<100 ){“
Here's a link:
这是一个链接:
http://bushidodesigns.net/consumer/webapp/funnel/email.htm
Click the "continue" button to see the issue.
单击“继续”按钮以查看问题。
Any idea what is causing this? I'm completely stumped.
知道是什么导致了这个吗?我完全难过了。
1 个解决方案
#1
Call run() after email.htm loads.
加载email.htm后调用run()。
$(document).on('click','#load-email',function() {
$("article").load("../loaders/email.htm", {}, function() {
run();
});
});
#1
Call run() after email.htm loads.
加载email.htm后调用run()。
$(document).on('click','#load-email',function() {
$("article").load("../loaders/email.htm", {}, function() {
run();
});
});