.append'den sonra jQuery işlevi

JQuery .appendtamamen tamamlandıktan sonra bir işlev nasıl çağrılır ?

İşte bir örnek:

$("#root").append(child, function(){
   // Action after append is completly done
});

Sorun: Karmaşık bir DOM yapısı eklendiğinde, append işlevi geri çağırma içindeki kök öğenin yeni boyutunun hesaplanması yanlıştır. Varsayımlar, DOM'un hala tam olarak yüklenmediği, eklenen karmaşık DOM'un yalnızca ilk alt öğesinin yüklü olduğudur.

Burada birçok geçerli cevabınız var ama hiçbiri size neden olduğu gibi çalıştığını gerçekten söylemiyor.

JavaScript'te komutlar, bir zaman aşımı veya aralık kullanarak asenkron olmalarını açıkça belirtmediğiniz sürece, geldikleri sırayla eşzamanlı olarak birer birer çalıştırılır.

Bu, .appendyönteminizin yürütüleceği ve bu yöntem işini bitirene kadar başka hiçbir şeyin (mevcut olabilecek olası zaman aşımlarını veya aralıkları göz ardı ederek) çalışmayacağı anlamına gelir.

Özetlemek gerekirse, .appendeşzamanlı olarak çalışacağından geri aramaya gerek yoktur .

Marcus Ekwall, eklemenin eşzamanlılığı konusunda kesinlikle haklı olsa da, tuhaf durumlarda bazen bir sonraki kod satırı çalıştığında DOM'un tarayıcı tarafından tamamen işlenmediğini de buldum.

Bu senaryoda, shadowdiver çözümleri doğru satırlardadır - .ready kullanarak - ancak aramayı orijinal eklentinize zincirlemek çok daha derli topludur.

$('#root')
  .append(html)
  .ready(function () {
    // enter code here
  });

Boyut yeniden hesaplamayla da tamamen aynı problemim var ve saatler süren baş ağrısından sonra .append()kesinlikle senkronize davranmaya katılmıyorum . En azından Google Chrome'da. Aşağıdaki koda bakın.

var input = $( '<input />' );
input.append( arbitraryElement );
input.css( 'padding-left' );

Padding-left özelliği, Firefox'ta doğru bir şekilde alınır, ancak Chrome'da boştur. Sanırım diğer tüm CSS özellikleri gibi. Bazı deneylerden sonra, CSS 'alıcıyı' setTimeout()10 ms gecikmeyle sarmalamaya karar verdim, bunun Çirkin olduğunu bildiğim, ancak Chrome'da çalışan tek kişi. Herhangi biriniz bu sorunu nasıl daha iyi çözebileceğiniz konusunda bir fikriniz varsa çok minnettar olurum.

Buradaki tüm cevaplara şaşırıyorum ...

Bunu dene:

window.setTimeout(function() { /* your stuff */ }, 0);

0 zaman aşımına dikkat edin. Bu rastgele bir sayı değil ... anladığım kadarıyla (anlayışım biraz sarsıcı olabilir), biri makro olaylar ve biri mikro olaylar için olmak üzere iki javascript olay kuyruğu var. "Daha geniş" kapsamlı kuyruk, kullanıcı arayüzünü (ve DOM'u) güncelleyen görevleri tutarken, mikro kuyruk hızlı görev türü işlemleri gerçekleştirir.

Ayrıca, bir zaman aşımı ayarlamanın, kodun tam olarak belirtilen değerde çalışacağını garanti etmediğini unutmayın. Bunun yaptığı şey aslında işlevi daha yüksek sıraya (UI / DOM'u işleyen) koyar ve belirtilen zamandan önce çalıştırmaz.

Bu, zaman aşımının 0 olarak ayarlanmasının, onu javascript olay kuyruğunun UI / DOM kısmına, bir sonraki olası fırsatta çalıştırılmak üzere koyacağı anlamına gelir.

Bu, DOM'un önceki tüm kuyruk öğeleriyle güncellendiği anlamına gelir (örneğin, aracılığıyla eklenir $.append(...);ve kodunuz çalıştığında, DOM tamamen kullanılabilir).

(ps - Bunu Secrects of the JavaScript Ninja'dan öğrendim - mükemmel bir kitap: https://www.manning.com/books/secrets-of-the-javascript-ninja )

Birisi için faydalı olabilecek başka bir varyantım var:

$('<img src="http://example.com/someresource.jpg">').load(function() {
    $('#login').submit();
}).appendTo("body");

Aynı problemle karşılaştım ve basit bir çözüm buldum. Ekleme işlevini çağırdıktan sonra hazır bir belge ekleyin.

$("#root").append(child);
$(document).ready(function () {
    // Action after append is completly done
});

Kullanmak MutationObserver, jQuery appendyöntemi için bir geri arama işlevi görebilir :

Bunu başka bir soruda açıkladım ve bu sefer sadece modern tarayıcılar için örnek vereceğim:

// 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>');

Bunun iyi yanıtlandığını düşünüyorum, ancak bu "subChild_with_SIZE" konusunu işlemeye biraz daha özgü (eğer bu ebeveynden geliyorsa, ancak onu olabileceği yerden uyarlayabilirsiniz)

$("#root").append(
    $('<div />',{
        'id': 'child'
    })
)
.children()
.last()
.each(function() {
    $(this).append(
        $('<div />',{
            'id': $(this).parent().width()
        })
    );
});

$.when($('#root').append(child)).then(anotherMethod());

Jquery append işlevi bir jQuery nesnesi döndürür, böylece sonunda bir yöntemi etiketleyebilirsiniz

$("#root").append(child).anotherJqueryMethod();

Resimler ve diğer kaynaklar için şunu kullanabilirsiniz:

$(el).one('load', function(){
    // completed
}).each(function() {
    if (this.complete)
        $(this).load();
});

En temiz yol, bunu adım adım yapmaktır. Her öğe üzerinden geçiş yapmak için her bir işlevi kullanın. Bu öğe eklenir eklenmez, onu işlemek için sonraki bir işleve aktarın.

    function processAppended(el){
        //process appended element
    }

    var remove = '<a href="#">remove</a>' ;
    $('li').each(function(){
        $(this).append(remove);   
        processAppended(this);    
    });​

Mobil cihazlar için HTML5 kodlarken bu sorunla karşılaştım. Bazı tarayıcı / cihaz kombinasyonları hatalara neden oldu çünkü .append () yöntemi DOM'daki değişiklikleri anında yansıtmadı (JS'nin başarısız olmasına neden oldu).

Bu durum için hızlı ve kirli çözüm:

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>');

Evet olabilir bir ekleme geri arama : Herhangi DOM ekleme fonksiyonu
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

JQuery belgelere Kontrolü: http://api.jquery.com/append/
burada Ve pratik, benzer, örnek: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

Geçenlerde benzer bir sorunla karşılaştım. Benim için çözüm, koleksiyonları yeniden yaratmaktı. Göstermeye çalışayım:

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();

Bu yardımcı olur umarım!

JQuery'de ekinizden hemen sonra kullanabilirsiniz

$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});

$ (), DOM için hazır bir geri aramayı kaydeden (ona bir işlev iletilirse) veya DOM'dan öğeler döndüren (kendisine bir seçici dize veya öğe iletilirse) bir işlevi çağırır

$ Ve $ () arasındaki farkı burada jQuery
http://api.jquery.com/ready/ içinde bulabilirsiniz.

Bunun en iyi çözüm olmadığını biliyorum, ancak en iyi uygulama:

$("#root").append(child);

setTimeout(function(){
  // Action after append
},100);

$('#root').append(child);
// do your work here

Append'in geri çağırmaları yoktur ve bu eşzamanlı olarak çalışan koddur - yapılmaması riski yoktur.

$('#root').append(child).anotherMethod();