특정 클래스의 div를 감지하는 jquery가 DOM에 추가되었습니다.

.on()페이지가로드 된 후 생성되는 div의 이벤트를 바인딩 하는 데 사용 하고 있습니다. click, mouseenter ...에 대해 잘 작동하지만 MyClass 클래스의 새 div가 추가 된시기를 알아야합니다. 나는 이것을 찾고 있어요 :

$('#MyContainer').on({

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

}, '.MyClass');

어떻게해야합니까? 플러그인없이 전체 앱을 작성해 왔으며 그대로 유지하고 싶습니다.

감사.

이전에는 jQuery의 domManip메소드에 연결하여 모든 jQuery dom 조작을 포착하고 삽입 된 요소 등을 확인할 수 있었지만 jQuery 팀은 일반적으로 jQuery 메소드에 연결하는 좋은 솔루션이 아니기 때문에 jQuery 3.0 이상에서이를 종료했습니다. 내부 domManip메서드는 더 이상 핵심 jQuery 코드 외부에서 사용할 수 없도록 만들었습니다 .

Mutation Events는 이전과 같이 사용되지 않습니다.

$(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

사용법은 .each함수를 사용하는 것과 동일 하지만 .initialize요소에 대한 함수를 사용 .each하면 AJAX 등으로 추가하더라도 향후 추가 코드없이 추가 된 요소도 초기화된다는 점이 다릅니다 .

Initialize는 .each 함수와 정확히 동일한 구문을 갖습니다.

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

그러나 이제 .some-element selector와 일치하는 새 요소가 페이지에 나타나면 인스턴스가 초기화됩니다. 새 항목이 추가되는 방식은 중요하지 않으며 콜백 등에 대해 신경 쓸 필요가 없습니다.

$("<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에 추가 된 특정 클래스의 요소"를 듣는 방법입니다 . 다음 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 이벤트 사양에 정의 된 돌연변이 이벤트를 대체하기 위해 설계되었습니다.

사용 예

다음 예제는 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추가 된 모든 요소에서 추가 된 노드를 재귀 적으로 찾습니다.