How to call a function after jQuery .append is completely done?
Here's an example:
$("#root").append(child, function(){
// Action after append is completly done
});
The issue: When a complex DOM structure is appended, calculation of new size of the root element within the append function callback is wrong. Assumptions are that the DOM in still not completely loaded, only the first child of the added complex DOM is.
Well I've got exactly the same problem with size recalculation and after hours of headache I have to disagree with .append() behaving strictly synchronous. Well at least in Google Chrome. See following code.
var input = $( '<input />' );
input.append( arbitraryElement );
input.css( 'padding-left' );
The padding-left property is correctly retrieved in Firefox but it is empty in Chrome. Like all other CSS properties I suppose. After some experiments I had to settle for wrapping the CSS 'getter' into setTimeout() with 10 ms delay which I know is UGLY as hell but the only one working in Chrome.
If any of you had an idea how to solve this issue better way I'd be very grateful.