.append之后的jQuery函数
如何在jQuery .append完成后调用一个函数？
这是一个例子：
$("#root").append(child, function(){ // Action after append is completly done });
问题：当附加一个复杂的DOM结构时，附加函数callback中根元素的新大小的计算是错误的。 假设是DOM仍然没有完全加载，只有添加的复杂DOM的第一个子节点是。
在这里你有很多有效的答案，但是他们没有一个真正地告诉你为什么它像现在这样工作。
在JavaScript中，一次执行一个命令，按照它们来的顺序同步执行，除非您使用超时或间隔明确告诉它们是asynchronous的。
这意味着你的.append方法将被执行，并且没有其他任何东西（忽略任何潜在的超时或者可能存在的时间间隔）将被执行，直到这个方法完成了它的工作。
总而言之，不需要callback，因为.append将会同步运行。
那么我有大小重新计算完全相同的问题，经过数小时的头痛，我不同意.append()行为严格同步。 至less在谷歌浏览器。 请参阅以下代码。
var input = $( '<input />' ); input.append( arbitraryElement ); input.css( 'padding-left' );
在Firefox中正确检索填充左侧属性，但在Chrome中为空。 像所有其他的CSS属性，我想。 经过一些实验，我不得不解决了将CSS“getter”封装到setTimeout() ，延迟10毫秒，我知道它是唯一一个在Chrome中工作的。 如果您有任何想法如何更好地解决这个问题，我将非常感激。
$.when($('#root').append(child)).then(anotherMethod());
我有另一个可能对某人有用的变体：
$('<img src="http://example.com/someresource.jpg">').load(function() { $('#login').submit(); }).appendTo("body");
使用MutationObserver可以像jQuery append方法的callback一样：
我已经在另一个问题中解释了这个问题 ，这次我只会举例说明现代浏览器：
// Somewhere in your app: var observeDOM = (() => { var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; return function(obj, callback){ if( MutationObserver ){ // define a new observer var obs = new MutationObserver(function(mutations, observer){ if( mutations[0].addedNodes.length || mutations[0].removedNodes.length ) callback(mutations); }); // have the observer observe foo for changes in children obs.observe( obj, { childList:true, subtree:true }); return obs; } } })(); ////////////////// // Your code: // setup the DOM observer (on the appended content's parent) before appending anything observeDOM( document.body, ()=>{ // something was added/removed }).disconnect(); // don't listen to any more changes // append something $('body').append('<p>foo</p>');
我认为这是很好的回答，但这是处理“subChild_with_SIZE”（如果这是来自父母，但你可以适应它从可能的地方）
$("#root").append( $('<div />',{ 'id': 'child' }) ) .children() .last() .each(function() { $(this).append( $('<div />',{ 'id': $(this).parent().width() }) ); });
我遇到了同样的问题，并find了一个简单的解决scheme。 在调用append函数后添加一个文档就绪。
$("#root").append(child); $(document).ready(function () { // Action after append is completly done });
尽pipeMarcus Ekwall synchronicity of append的synchronicity of append是绝对正确的，但我也发现，在奇数情况下，当下一行代码运行时，浏览器有时并不会完全呈现DOM。
在这种情况下， shadowdiver solutions是沿着正确的路线 – 与使用.ready – 然而，将电话连接到您的原始追加是一个更加整齐。
$('#root') .append(html) .ready(function () { // enter code here });
对于图像和其他来源，你可以使用它：
$(el).one('load', function(){ // completed }).each(function() { if (this.complete) $(this).load(); });
我对这里的所有答案感到惊讶…
尝试这个：
window.setTimeout(function() { /* your stuff */ }, 0);
注意0超时。 这不是一个任意的数字…据我所知（虽然我的理解可能有点不稳定），有两个JavaScript事件队列 – 一个用于macros事件，一个用于微事件。 “更大的”作用域队列包含更新UI（和DOM）的任务，而微型队列执行快速任务types的操作。
也意识到设置超时并不能保证代码完全按照指定的值执行。 这样做实质上是将函数放入更高的队列（处理UI / DOM的队列），并且在指定的时间之前不运行它。
这意味着将超时设置为0会将其放入JavaScript事件队列的UI / DOM部分，以便在下一次可能的机会中运行。
这意味着DOM会更新所有先前的队列项目（例如通过$.append(...);插入$.append(...); ，并且当您的代码运行时，DOM完全可用。
（ps – 我从JavaScript忍者秘书中学到了这本书 – 一本很好的书： https : //www.manning.com/books/secrets-of-the-javascript-ninja ）
Jquery append函数返回一个jQuery对象，所以你可以在最后标记一个方法
$("#root").append(child).anotherJqueryMethod();
你可以做：
$("#root").append(child); setTimeout(function(){ // Action after append },100);
我在为移动设备编码HTML5时遇到了这个问题。 某些浏览器/设备组合导致错误，因为.append（）方法不能立即反映DOM中的更改（导致JS失败）。
对于这种情况，通过快速而肮脏的解决scheme是：
var appint = setInterval(function(){ if ( $('#foobar').length > 0 ) { //now you can be sure append is ready //$('#foobar').remove(); if elem is just for checking //clearInterval(appint) } }, 100); $(body).append('<div>...</div><div id="foobar"></div>');
我最近碰到类似的问题。 我的解决scheme是重新创build收集。 让我试着展示一下：
var $element = $(selector); $element.append(content); // This Doesn't work, because $element still contains old structure: $element.fooBar(); // This should work: the collection is re-created with the new content: $(selector).fooBar();
希望这可以帮助！
是的，你可以添加一个callback函数到任何DOM插入：
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })
检查JQuery文档： http ： //api.jquery.com/append/
这里有一个实用的，类似的例子： http : //www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_prepend_func
$('#root').append(child); // do your work here
追加没有callback，这是同步执行的代码 – 没有风险没有完成
$('#root').append(child).anotherMethod();
