javascript - 动态 DOM 元素未被拾取为 lastChild

Question

我在 firefox 中出现了一个奇怪的问题(没有测试 ie 等，但仍然需要它在 firefox 中工作)。我正在使用 ajax 使用包含从数据库返回的信息的 div 填充父 div。服务器端是带有 while 循环的 PHP，该循环遍历结果集并回显每个 div。

整个脚本工作正常并用不同数量的子节点填充父 div(#ID of parent div ='webses')，我遇到的问题是当我在获取新集后检查最后一个子节点时通过 ajax 的 div 的 lastChild 被报告为先前填充的 lastChild。

一个例子是:

'#webses' 有 4 个子节点 (divs)，最后一个子节点的 ID 为“no4”，然后我在#webses 下重新填充整个子节点集，添加一个 ID 为“no5”的新 div，然后查询 ID重新填充 div 的函数末尾的最后一个子节点“立即”返回，lastChild 作为“no4”返回。然后我可以运行相同的查询(一旦函数完成)来检查 #webses 上的 lastChild(通过浏览器地址栏)，然后正确返回 no5!

这里是一个展示问题的代码示例(使用警报显示 lastChild 上的 ID 值):

function populateWebses() {

//populates parentNode DIV 'webses' with divs populated via AJAX
populateParentNodeViaAJAX();

alert(document.getElementById("webses").lastChild.id);
}

查看 lastChild 的查询是在“#webses”下的 DOM 使用新的子节点更新后立即执行的，我想这就是问题所在，但为什么呢？

非常感谢任何帮助。

丹

Answer 1

AJAX 表示异步 Javascript。执行警报时 populateParentNodeViaAJAX() 方法尚未完成，因此它返回“旧”值。

如果您需要执行某种依赖于 Ajax 方法已完成这一事实的操作，则需要使用回调机制(仅在 Ajax 调用完成后才调用函数 X)。