DOM'a belirli bir sınıfın jquery algılayan div'i eklendi

.on()Sayfa yüklendikten sonra oluşturulan div olaylarını bağlamak için kullanıyorum . Tıklama, fare girişi için iyi çalışıyor ... ama sınıfımın yeni bir div'i sınıfının ne zaman eklendiğini bilmem gerekiyor. Ben bunu arıyorum:

$('#MyContainer').on({

  wascreated: function () { DoSomething($(this)); }

}, '.MyClass');

Bunu nasıl yaparım? Tüm uygulamamı bir eklenti olmadan yazmayı başardım ve bu şekilde kalmasını istiyorum.

Teşekkürler.

Daha önce domManip, jQuery'nin tüm jQuery dom manipülasyonlarını yakalamak ve hangi öğelerin nereye yerleştirildiğini görmek için bir yöntem kullanılıyordu, ancak jQuery ekibi bunu jQuery 3.0 + 'da kapattı çünkü jQuery yöntemlerine bu şekilde bağlanmak genellikle iyi bir çözüm değil ve onlar' dahili domManipyöntemin artık çekirdek jQuery kodunun dışında kullanılamayacağı şekilde yapılmıştır.

Daha önce olduğu gibi, Mutasyon Olayları da kullanımdan kaldırıldı.

$(document).on('DOMNodeInserted', function(e) {
    if ( $(e.target).hasClass('MyClass') ) {
       //element with .MyClass was inserted.
    }
});

bundan kaçınılmalıdır ve bugün bunun yerine Mutasyon Gözlemcileri kullanılmalıdır, bu şekilde çalışır

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation)
        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
            // element added to DOM
            var hasClass = [].some.call(mutation.addedNodes, function(el) {
                return el.classList.contains('MyClass')
            });
            if (hasClass) {
                // element has class `MyClass`
                console.log('element ".MyClass" added');
            }
        }
    });
});

var config = {
    attributes: true,
    childList: true,
    characterData: true
};

observer.observe(document.body, config);

İşte tam olarak bunu yapan eklentim - jquery.initialize

Kullanım, .eachişlevi kullandığınızla aynıdır , ancak öğedeki işlevle, bunun .initializefarkı, .eachgelecekte ek bir kod olmadan eklenen öğeleri de başlatmasıdır - AJAX veya başka bir şeyle eklerseniz ekleyin.

Initialize, .each işleviyle tam olarak aynı sözdizimine sahiptir

$(".some-element").initialize( function(){
    $(this).css("color", "blue");
});

Ama şimdi yeni eleman eşleşen .some-element seçici sayfada görünecekse, anında başlatılacaktır. Yeni öğenin eklenme şekli önemli değildir, herhangi bir geri aramayla ilgilenmenize gerek yoktur.

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

Eklenti, MutationObserver

Bunu ve diğer birkaç gönderiyi inceledikten sonra, her birinin en iyisi olduğunu düşündüğüm şeyi, bir öğe sınıfının ne zaman eklendiğini tespit etmeme ve ardından bu öğeler üzerinde hareket etmeme izin veren basit bir şeye dönüştürmeye çalıştım .

function onElementInserted(containerSelector, elementSelector, callback) {

    var onMutationsObserved = function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                var elements = $(mutation.addedNodes).find(elementSelector);
                for (var i = 0, len = elements.length; i < len; i++) {
                    callback(elements[i]);
                }
            }
        });
    };

    var target = $(containerSelector)[0];
    var config = { childList: true, subtree: true };
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(onMutationsObserved);    
    observer.observe(target, config);

}

onElementInserted('body', '.myTargetElement', function(element) {
    console.log(element);
});

Benim için önemli olan bu, a) hedef öğenin "eklenen Düğümler" içinde herhangi bir derinlikte bulunmasına ve b) yalnızca başlangıçta eklendiğinde öğeyle başa çıkma becerisine (tüm belge ayarını aramaya gerek yok veya "önceden işlenmiş" i yok saymaya gerek yok) bayraklar).

3 yıllık deneyimimden sonra, "DOM'a eklenen belirli bir sınıfın öğesi" ni şu şekilde dinlerim : jQuery html()işlevine şunun gibi bir kanca eklemeniz yeterlidir :

function Start() {

   var OldHtml = window.jQuery.fn.html;

   window.jQuery.fn.html = function () {

     var EnhancedHtml = OldHtml.apply(this, arguments);

     if (arguments.length && EnhancedHtml.find('.MyClass').length) {

         var TheElementAdded = EnhancedHtml.find('.MyClass'); //there it is
     }

     return EnhancedHtml;
   }
}

$(Start);

Bu, benim yaptığım jQuery kullanıyorsanız çalışır. Ve tarayıcılar DOMNodeInsertedarası uyumlu olmayan tarayıcıya özgü etkinliğe dayanmaz . Aynı uygulamayı şunun için de ekledim:.prepend()

Genel olarak, bu benim için bir cazibe gibi çalışıyor ve umarım sizin için de.

mutasyon olaylarını kullanabilirsin

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

DÜZENLE

MDN'den: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

Kullanımdan Kaldırıldı Bu özellik Web'den kaldırılmıştır. Bazı tarayıcılar hala desteklese de, bırakılma sürecindedir. Eski veya yeni projelerde kullanmayınız. Bunu kullanan sayfalar veya Web uygulamaları her an bozulabilir.

Mutasyon Gözlemcileri, DOM4'teki mutasyon olayları için önerilen ikamedir. Firefox 14 ve Chrome 18'e dahil edilecekler.

https://developer.mozilla.org/en/docs/Web/API/MutationObserver

MutationObservergeliştiricilere bir DOM'daki değişikliklere tepki vermenin bir yolunu sağlar. DOM3 Olayları spesifikasyonunda tanımlanan Mutasyon Olaylarının yerini alacak şekilde tasarlanmıştır.

Örnek kullanım

Aşağıdaki örnek, http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ adresinden alınmıştır .

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

Adeneo'nun cevabına iki ekleme:

(1) çizgiyi değiştirebiliriz

return el.classList.contains('MyClass');

İçin

if( el.classList ) {
    return el.classList.contains('MyClass');
} else {
    return false;
}

Yani "Uncaught TypeError: Cannot read property 'contains' of undefined"hatayı görmeyeceğiz .

(2) bir eklenti subtree: trueolarak configardışık tüm ilave elemanlarında ilave düğümleri bulmak.