Hakkında bir çok soru vardırvar olmayan elemanları için bağlayıcı gelecekte yapılabileceklero cevap verdi sonundalive/temsilci. Keyfi bir geri arama çalıştırmak için nasıl merak ediyorum(bir sınıf eklemek veya bir eklenti, örneğin tetik)içinaynı seçici eşleşen bir seçici ve gelecekteki tüm öğeleri eşleşen tüm öğeleri mevcuto, henüz yaratılmamış.

Livequery eklentisi ana işlevi çekirdeğin içine yapılmış gibi görünüyor ama diğer kısmı, keyfi geri takma yöntemi bir şekilde kaybolmuş.

Başka bir ortak cevapolay heyetama eğer elemanları trigger olayları için yarattığını satıcı tüm kod erişimi var değil mi varsa ne?

Burada gerçek dünyadaki bazı kod:

// with livequery
$('input[type=text], input[type=password], textarea, .basic_form .block select, .order_form .form_item select, .order_form .form_item input')
    .livequery(function(){
        $(this)
            .focus(function(){
                $(this).addClass('active');
            })
            .blur(function(){
                $(this).removeClass('active');
            })
            .addClass('text');
    });

// with live
$('input[type=text], input[type=password], textarea, .basic_form .block select, .order_form .form_item select, .order_form .form_item input')
    .live('focus', function(){
            $(this).addClass('active');
        })
    .live('blur', function(){
            $(this).removeClass('active');
        });
    // now how to add the class to future elements?
    // (or apply another plugin or whatever arbitrary non-event thing)

Bir yaklaşım, yeni bir düğüm eklenir/kaldırılır ve yeniden harekete bizim seçiciler izlemek olurdu. Teşekkürler@arnorhshakkında biliyoruzDOMNodeİnsertedbu küçük yamalar YANİ bir gün bir WordPress kullanmak için yukarı havza arazi veya jQuery DOM fonksiyonları bilerek olabilir umuduyla çapraz tarayıcı sorunları görmezden isterim ki olay, sarılmış olabilir.

Eğer DOMNodeİnserted çapraz tarayıcı ateş ulaşmasını sağlayabiliriz bile, ancak, birden fazla seçiciler ile bağlamak çok saçma olur. Öğeleri yüzlerce herhangi bir zamanda oluşturulabilir, ve potansiyel olarak bu unsurların her biri üzerinde seçici bir düzine görüşme yaparak sürün.

Şimdiye kadar benim en iyi fikir

Belki DOMNodeİnserted/izlemek için daha iyi silinmesi ve ya jQuery kanca DOM manipülasyon rutinleri tek bir bayrak ayarlamak için bu bir "yeniden başlatma" gerçekleşmesi gerekir? O zaman sadece DOM aslında değiştiğinde o bayrağı x saniye, sadece o seçiciler çalışan her/geri aramaları kontrol eden bir zamanlayıcı olabilir.

Yine de eğer hızlı bir oranda büyük sayıda eleman (animasyon veya . ile kaldırma eklemiş gerçekten çok kötü olabilir ^em>__). Yeniden ayrıştırma DOM bir kez kaydedilen her seçici için gerek her x saniye x düşükse çok yoğun olabilir ve arayüz eğer x yüksekse, durgun görünür.

Başka çözümler?

Beni çağırdığında bir ödül katacak.Çoğu Roman çözümü için bir ödül ekledik!

At alıyorum temelde bir dahaboy-odaklı bir yaklaşımDOM. manipüle etmek Tek izin verebilirsinizyeni unsurlar gelecekte yaratılacakoluşturulmuş olmalıdırilk belge.hazır değişiklikler de uygulanır.

JS açık olacak umuyorum o kadar çok büyü son zamanlarda yapmak mümkün olmuştur.

Bana göre, DOM Düzey 3 olaylar DOMNodeInserted^help (yangınlar için düğümler) ve DOMSubtreeModified^help (ateş için neredeyse herhangi bir değişiklik, gibi öznitelik değişikliklerini) sizin en iyi çekim bu görevi gerçekleştirmek.

Tabii ki, bu olayların büyük dezavantajı bu dünya Internet Kaşifler onlara destek yok
(...iyi,9yok).

Bu sorun için başka bir makul çözüm, DOM değiştirmek için herhangi bir yöntem içine kanca. Ama biz alanımızı ne olduğunu sormak zorundayım, burada mı?

Sadece bir WordPress kullanmak gibi belirli bir kütüphaneden DOM modifikasyon yöntemleri ile başa çıkmak için yeterli mi? Eğer bazı nedenlerden dolayı başka bir kütüphane DOM hatta yerel bir yöntem değiştirme ne ?

Eğer bir WordPress kullanmak için ise sadece .sub() hiç ihtiyacımız yok. Şeklinde kanca yazabiliriz:

HTML

<div id="test">Test DIV</div>

JS

(function(_append, _appendTo, _after, _insertAfter, _before, _insertBefore) {
    $.fn.append = function() {
        this.trigger({
            type: 'DOMChanged',
            newnode: arguments[0]
        });
        return _append.apply(this, arguments);
    };
    $.fn.appendTo = function() {
        this.trigger({
            type: 'DOMChanged',
            newnode: this
        });
        return _appendTo.apply(this, arguments);
    };
    $.fn.after = function() {
        this.trigger({
             type: 'DOMChanged',
             newnode: arguments[0]
         });
        return _after.apply(this, arguments);
    };

    // and so forth

}($.fn.append, $.fn.appendTo, $.fn.after, $.fn.insertAfter, $.fn.before, $.fn.insertBefore));

$('#test').bind('DOMChanged', function(e) {
    console.log('New node: ', e.newnode);
});

$('#test').after('<span>new span</span>');
$('#test').append('<p>new paragraph</p>');
$('<div>new div</div>').appendTo($('#test'));

Kodu burada bulunabilir yukarıda canlı bir örnek: http://www.jsfiddle.net/RRfTZ/1/

Elbette bu DOMmanip yöntemleri tam listesi gerektirir. Eğer bu yaklaşım ile .appendChild() gibi doğal yöntemleri üzerine emin değilim. .appendChild örneğin Element.prototype.appendChild bulunan, bir deneyin değerinde olabilir.

güncelleme

Element.prototype.appendChild vb üzerine test ettim. Krom, ve (resmi son sürüm) Safari Firefox. Chrome ve Safari'de çalışıyor ama Firefox değil!

İhtiyacını çözmek için başka yollar olabilir. Ama gerçekten tatmin edici olan tek bir yaklaşım düşünemiyorum, sayma / düğüm interval timeouts, eeek bir ihtiyacı olan tüm torunları izlemek gibi.

Sonuç

DOM karışımı desteklenen ve çengel DOMmanip yöntemleri muhtemelen burada yapabileceğin en iyi olduğu 3 Düzeyde olayları.