如何在jQuery .append
完成后调用函数?
下面是一个例子:
$("#root").append(child, function(){
// Action after append is completly done
});
问题:当附加复杂的DOM结构时,在附加函数回调中计算根元素的新大小是错误的。假设DOM仍然没有完全加载,只有添加的复杂DOM的第一个孩子加载。
发布于 2011-05-20 15:59:58
你在这里有很多有效的答案,但没有一个真正告诉你为什么它是这样工作的。
在JavaScript中,命令按照它们出现的顺序一次执行一个命令,除非您通过使用超时或间隔显式地告诉它们是异步的。
这意味着将执行您的.append
方法,并且在该方法完成其作业之前不会执行任何其他内容(忽略任何潜在的超时或可能存在的时间间隔)。
总而言之,由于.append
将同步运行,因此不需要回调。
发布于 2016-07-14 17:55:58
尽管Marcus Ekwall关于append的同步性的说法是绝对正确的,但我也发现在一些奇怪的情况下,当下一行代码运行时,浏览器并不能完全呈现DOM。
在这种情况下,阴影潜水器的解决方案是正确的-使用.ready -然而,将调用链接到原始追加要整洁得多。
$('#root')
.append(html)
.ready(function () {
// enter code here
});
发布于 2012-05-30 23:04:58
我在重新计算大小时遇到了完全相同的问题,在经历了几个小时的头痛之后,我不得不不同意.append()
严格同步的行为。至少在Google Chrome中是这样的。请参见以下代码。
var input = $( '<input />' );
input.append( arbitraryElement );
input.css( 'padding-left' );
padding属性在Firefox中被正确获取,但在Chrome中为空。我想就像所有其他的CSS属性一样。经过一些实验后,我不得不满足于用10ms的延迟将CSS 'getter‘封装到setTimeout()
中,我知道这很难看,但却是唯一能在Chrome上运行的。如果你们中的任何人有办法更好地解决这个问题,我将不胜感激。
https://stackoverflow.com/questions/6068955
复制相似问题