เพิ่ม jquery ที่ตรวจจับ div ของคลาสบางคลาสใน DOM แล้ว

ฉันใช้.on()เพื่อเชื่อมโยงเหตุการณ์ของ div ที่สร้างขึ้นหลังจากโหลดเพจ ใช้งานได้ดีสำหรับการคลิก, mouseenter ... แต่ฉันต้องการทราบเมื่อมีการเพิ่ม Div ใหม่ของคลาส MyClass ฉันกำลังมองหาสิ่งนี้:

$('#MyContainer').on({

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

}, '.MyClass');

ฉันต้องทำอย่างไร ฉันสามารถเขียนแอปทั้งหมดได้โดยไม่ต้องใช้ปลั๊กอินและฉันต้องการให้มันเป็นแบบนั้น

ขอบคุณ.

ก่อนหน้านี้เราสามารถเชื่อมต่อdomManipวิธีการของ jQuery เพื่อจับการปรับแต่ง jQuery dom ทั้งหมดและดูว่ามีองค์ประกอบใดบ้างที่แทรก ฯลฯ แต่ทีม jQuery ปิดตัวลงใน jQuery 3.0+ เนื่องจากโดยทั่วไปแล้วไม่ใช่วิธีที่ดีในการเชื่อมต่อกับวิธีการ jQuery ด้วยวิธีนี้และพวกเขา ' ทำให้domManipวิธีการภายในไม่สามารถใช้ได้อีกต่อไปนอกรหัส jQuery หลัก

เหตุการณ์การกลายพันธุ์ได้ถูกเลิกใช้เช่นกันเนื่องจากก่อนหน้านี้เราสามารถทำบางสิ่งได้เช่น

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

ควรหลีกเลี่ยงสิ่งนี้และควรใช้ Mutation Observers ในปัจจุบันแทนซึ่งจะได้ผลเช่นนี้

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

นี่คือปลั๊กอินของฉันที่ทำให้แย่ลงอย่างนั้น - jquery.initialize

Useage เหมือนกับที่คุณใช้.eachฟังก์ชัน แต่ด้วย.initializeฟังก์ชันกับองค์ประกอบความแตกต่าง.eachคือจะเริ่มต้นองค์ประกอบที่เพิ่มเข้ามาในอนาคตโดยไม่ต้องใช้รหัสเพิ่มเติมไม่ว่าคุณจะเพิ่มด้วย AJAX หรืออย่างอื่นก็ตาม

Initialize มีรูปแบบเดียวกันกับฟังก์ชัน

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

แต่ตอนนี้ถ้าองค์ประกอบใหม่ที่ตรงกันตัวเลือกองค์ประกอบบางอย่างจะปรากฏบนหน้ามันจะเริ่มต้นทันที วิธีการเพิ่มรายการใหม่ไม่สำคัญคุณไม่จำเป็นต้องกังวลเกี่ยวกับการเรียกกลับใด ๆ ฯลฯ

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

ปลั๊กอินขึ้นอยู่กับ MutationObserver

หลังจากตรวจสอบนี้และโพสต์อื่น ๆ อีกหลายฉันพยายามที่จะสกัดสิ่งที่ผมคิดว่าเป็นสิ่งที่ดีที่สุดของแต่ละเป็นสิ่งง่ายๆที่อนุญาตให้ฉันไปตรวจสอบเมื่อระดับขององค์ประกอบที่ถูกแทรกแล้วทำหน้าที่เกี่ยวกับองค์ประกอบเหล่านั้น

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

สิ่งสำคัญสำหรับฉันสิ่งนี้ช่วยให้ a) องค์ประกอบเป้าหมายมีอยู่ที่ระดับความลึกใด ๆ ภายใน "addedNodes" และ b) ความสามารถในการจัดการกับองค์ประกอบเมื่อแทรกครั้งแรกเท่านั้น (ไม่จำเป็นต้องค้นหาการตั้งค่าเอกสารทั้งหมดหรือละเว้น "ประมวลผลแล้ว" ธง)

ประสบการณ์ 3 ปีต่อมานี่คือวิธีที่ฉันฟัง"องค์ประกอบของคลาสที่เพิ่มเข้ามาใน DOM" : คุณเพียงแค่เพิ่ม hook เข้าไปในhtml()ฟังก์ชันjQuery ดังนี้:

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

ใช้งานได้ถ้าคุณใช้ jQuery ซึ่งฉันทำ และไม่ขึ้นอยู่กับเหตุการณ์เฉพาะเบราว์เซอร์DOMNodeInsertedซึ่งไม่สามารถใช้งานข้ามเบราว์เซอร์ได้ ฉันยังเพิ่มการใช้งานเดียวกันสำหรับ.prepend()

โดยรวมแล้วสิ่งนี้เป็นเสน่ห์สำหรับฉันและหวังว่าจะเป็นเช่นนั้นสำหรับคุณด้วย

คุณสามารถใช้เหตุการณ์การกลายพันธุ์

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

แก้ไข

จาก MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

เลิกใช้งานคุณลักษณะนี้ถูกลบออกจากเว็บแล้ว แม้ว่าบางเบราว์เซอร์อาจยังรองรับอยู่ แต่ก็อยู่ในระหว่างการลดลง อย่าใช้ในโครงการเก่าหรือใหม่ เพจหรือเว็บแอพที่ใช้อาจพังได้ตลอดเวลา

Mutation Observers คือการนำเสนอแทนเหตุการณ์การกลายพันธุ์ใน DOM4 จะรวมอยู่ใน Firefox 14 และ Chrome 18

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

MutationObserverช่วยให้นักพัฒนาสามารถตอบสนองต่อการเปลี่ยนแปลงใน DOM ได้รับการออกแบบมาเพื่อทดแทนเหตุการณ์การกลายพันธุ์ที่กำหนดไว้ในข้อกำหนด DOM3 Events

ตัวอย่างการใช้งาน

ตัวอย่างต่อไปนี้ถูกนำมาจากhttp://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

// 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 สองอย่างเพิ่มเติม:

(1) เราสามารถเปลี่ยนสายได้

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

ถึง

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

ดังนั้นเราจะไม่เห็น"Uncaught TypeError: Cannot read property 'contains' of undefined"ข้อผิดพลาด

(2) เพิ่มsubtree: trueในconfigการหาโหนดเพิ่มซ้ำในองค์ประกอบที่เพิ่มเข้ามาตลอด