jquery detection 특정 클래스의 div가 DOM에 추가되었습니다.

jquery detection 특정 클래스의 div가 DOM에 추가되었습니다.

사용하고 있습니다..on()페이지가 로드된 후 생성되는 div의 이벤트를 바인딩합니다.클릭할 때는 잘 작동합니다. 마우스 입력...그런데 언제 내 클래스의 디브가 새로 추가되었는지 알고 싶습니다.나는 이것을 찾고 있습니다.

$('#MyContainer').on({

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

}, '.MyClass');

이거 어떻게 해요?플러그인 없이 앱 전체를 쓸 수 있었고 그렇게 유지하고 싶습니다.

감사해요.

이전에는 jQuery의 것을 연결할 수 있었습니다.domManip모든 jQuery dom 조작을 잡고 삽입된 곳에 어떤 요소가 있는지 확인하는 방법입니다. 그러나 jQuery 팀은 일반적으로 jQuery 방법에 그런 방식으로 연결하는 것은 좋은 솔루션이 아니기 때문에 jQuery 3.0+에서 종료했습니다. 그리고 그들은 그것을 내부적으로 만들었습니다.domManipmethod는 코어 jQuery 코드 밖에서는 더 이상 사용할 수 없습니다.

돌연변이 이벤트 또한 이전과 마찬가지로 다음과 같은 것을 할 수 있었습니다.

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

이것은 피해야 하며, 오늘날 돌연변이 관찰자가 대신 사용되어야 하며, 이것은 이렇게 작동할 것입니다.

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원소에 대한 함수, 다음과.eachAJAX 등과 함께 추가하더라도 추가 코드 없이 향후 추가되는 요소도 초기화됩니다.

initialize 는 .each function 과 정확히 동일한 구문을 갖습니다.

$(".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) 대상 요소가 "addedNode" 내의 모든 깊이에 존재할 수 있도록 하고 b) 처음에 삽입될 때만 요소를 처리할 수 있도록 한다는 것입니다(전체 문서 설정을 검색하거나 "이미 처리된" 플래그를 무시할 필요가 없음).

3년의 경험 후, 이것은 내가 "DOM에 추가된 특정 클래스의 요소"를 듣는 방식입니다: 당신은 단순히 jQuery에 후크를 추가합니다.html()함수는 다음과 같습니다.

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

Query를 사용하는 경우에는 작동합니다.그리고 브라우저별 이벤트에 의존하지 않습니다.DOMNodeInserted 호환되지 즉, 이 이 저는 n에 대해서도 하였습니다..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

사용하지 않음 이 기능은 웹에서 제거되었습니다.일부 브라우저는 여전히 이를 지원할 수 있지만 삭제 절차를 밟고 있습니다.기존 또는 신규 프로젝트에서는 사용하지 마십시오.그것을 사용하는 페이지나 웹 앱은 언제든지 깨질 수 있습니다.

돌연변이 관찰자는 DOM4의 돌연변이 이벤트를 대체하기 위해 제안된 것입니다.그것들은 파이어폭스 14와 크롬 18에 포함될 것입니다.

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

MutationObserver대응하는 합니다. DOM의 변화에 대응하는 방법을 제공합니다.DOM3 Events 사양에 정의된 Mutation 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();

아드님의 답변에 두 가지가 더 추가되었습니다.

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

언급URL : https://stackoverflow.com/questions/10415400/jquery-detecting-div-of-certain-class-has-been-added-to-dom