새 노드가 DOM에 삽입 될 때 발생하는 jquery 이벤트가 있습니까?

새 노드가 DOM에 삽입 될 때 발생하는 jquery 이벤트가 있습니까?

---

jquery가 DOM에 삽입 될 때 dom 요소에서 발생하는 이벤트가 있습니까?

예를 들어 ajax를 통해 일부 콘텐츠를로드하고 DOM에 추가하고 다른 자바 스크립트에서 .live ()를 사용하여 이벤트를 추가 할 수 있으므로 특정 선택자와 일치하는 이벤트가 DOM에 추가 될 때 이벤트가 발생합니다. 상기 요소. $ (document) .ready ()와 유사하지만 DOM에 동적으로 추가되는 콘텐츠에 있습니다.

내가 꿈꾸는 것 :

$('.myClass').live('ready', function() {
    alert('.myClass added to dom');
});

jquery가 그러한 것을 지원하지 않는다면 실제로 초기 dom 조작을 수행하는 코드를 수정하지 않고이 기능을 달성 할 수있는 또 다른 방법이 있습니까?

---

.livequery()플러그인은 여전히 같은이 틈새 시장의 필요를 제공합니다 :

$('.myClass').livequery(function() {
  alert('.myClass added to dom');
});

위와 같은 콜백 함수 만 전달하면 처음에 발견 된 새 요소와 추가 될 때마다 실행됩니다. 함수 내부는 this방금 추가 된 요소를 참조합니다.

.live()기포이므로 그 점에서,이 "요소가 추가되는"상황에 맞지 않는 이벤트를 수신 .livequery()(플러그인)이되지 않은 완전히 첨가함으로써 대체 .live()대부분에 코어 만 이벤트 버블 부 ( ) 였다.

---

deprecated : 아래 @Meglio의 의견에 따라 DOMNodeInserted이벤트는 더 이상 사용되지 않으며 향후 알 수없는 시간에 웹에서 제거 될 예정입니다. 최상의 결과를 얻으려면 MutationObserver API 에 대해 알아보십시오 .

아래 @dain의 답변을 참조하십시오 .

'DOMNodeInserted'이벤트 를 문서 또는 본문에 직접 바인딩하면 아무 곳에 나 삽입 할 때마다 실행됩니다. 특정 유형의 요소가 추가 된 경우에만 콜백이 실행되도록하려면 위임 된 이벤트 를 사용하는 것이 좋습니다 .

일반적으로 DOM에 요소 클래스를 추가하는 경우 공통 상위 요소에 추가하게됩니다. 따라서 다음과 같이 이벤트 핸들러를 첨부하십시오.

$('body').on('DOMNodeInserted', '#common-parent', function(e) {
  if ($(e.target).attr('class') === 'myClass') {
    console.log('hit');
  }
});

기본적으로 Myke의 ​​위와 같은 대답 이지만 직접 이벤트 핸들러가 아닌 위임 된 이벤트 핸들러를 사용하고 있기 때문에 코드가 덜 자주 발생합니다.

노트:

$('body').on('DOMNodeInserted', '.myClass', function(e) {
  console.log(e.target);
});

이것도 작동하는 것 같지만 이유를 모르겠습니다.

---

최첨단에 살고 있다면 MutationObserver를 사용할 수 있습니다. :)

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var list = document.querySelector('ol');

  var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        var list_values = [].slice.call(list.children)
            .map( function(node) { return node.innerHTML; })
            .filter( function(s) {
              if (s === '<br>') {
                return false;
              }
              else {
                return true;
              }
        });
        console.log(list_values);
      }
    });
  });

  observer.observe(list, {
    attributes: true, 
    childList: true, 
    characterData: true 
   });

참조 : https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

편집 :이 답변은 꽤 오래되었습니다. 이제 MutationObserver는 Opera Mini를 제외한 모든 브라우저에서 지원됩니다 : http://caniuse.com/#feat=mutationobserver

또한 다음은 MDN의 API에 대한 직접 링크입니다. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

---

jQuery 이벤트는 없지만 DOM 이벤트 : DOMNodeInsertedIntoDocument가 있습니다. jQuery의 on 메소드를 사용하여 DOM 이벤트를 수신 할 수 있습니다. 그래서:

$('.myClass').on('DOMNodeInsertedIntoDocument', function() {
  alert('myClass was inserted into the DOM');
}

플러그인이 약간 오래 되었기 때문에 liveQuery를 사용하는 것보다 더 나을 수 있습니다 (2 년 이상 업데이트되지 않고 jQuery 1.2.x에 대한 지원 만 약속 함).

---

Take a look at insertionQuery. It's an interesting library that uses CSS to detect new elements. Because it uses CSS there's no performance hit and you get returned the actual elements matching the selector.

참고URL : https://stackoverflow.com/questions/3900151/is-there-a-jquery-event-that-fires-when-a-new-node-is-inserted-into-the-dom