사용 DOMSubtreeModified 돌연변이는 이벤트입니다.에 jQuery

Question

내가 사용한 다음 jQuery 코드에 내 페이지고 모든 것에서 잘 작동합니다.하지만 열 때까지는 각각의 페이지에서는 파이어 폭스 내가 응답하지 않는 스크립트 오류가 있습니다.

내가 알고 있으로 당 dom level3 명세 사양을 돌연변이는 이벤트가 더 이상 사용되지 않습니다.하지만 여전히 사람이 나를 도울 수 있는 여기에,나는 의무입니다.

jQuery('#term').on("DOMSubtreeModified",function(){
$("#term > .click-slide").click(function(){
            $(this).siblings().slideToggle();

            });
 });

각각의 HTML:

<div class="btn-slide" id="term">
    <div class="click-slide">
      <button>Search Terms </button>
    </div>
    <div class="btn-box">
       <label><span>Novena</span></label>
    </div>
</div>

Answer 1

그것처럼 보이는 파이어 폭스에서 호출 .slideToggle() 가 트리거 DOMSubtreeModified 이벤트는 동안,이것은 일어나지 않을 크롬에서.그래서 기본적으로 Firefox 에서 뭔가 처음에 이벤트는 바인딩의 클릭 처리기입니다.모든 좋은 이점이다.할 때 그 진행을 클릭하면, slideToggle 발생으로 예상된다.그러나,그 불을 끄 DOMSubtreeModified 이벤트 및 당신은,끝으로 두 개의 이벤트 처리기를 클릭 두고 slideToggle 기 때문에 그들은 지금 등록된다.다음 시간 당신은 클릭할 때는 무한 루프 발생합니다.기본적으로 여러 클릭한 이벤트를 유지 트리거 DOMSubtreeModified 등록 더 많은 클릭 처리기는 더 이 slideToggles 되는 일이 더 트리거 DOMSubtreeModifieds 에 등등.이를 해결하려면 사용할 수 있습니다 jQuery 의 .one 알려주는 페이지만 그 DOMSubtreeModified 핸들러면을 방지하는 이 루프입니다.하지 않는 경우에 적합한 솔루션 당신이해야하고 몇 가지 다른 방법 확인 .click 핸들러하지 않습 얻을 수밖에 없습니다.

jQuery('#term').one("DOMSubtreeModified",function(){   //Notice this is using .one and not .on

체크 아웃 JSFiddle -그것은 사용 .one 그러나 나는 할 수 있었는지 확인할 때 사용합니다.에,문제에 일어난 일이러스지 않습니다.

Answer 2

이것은 질문이 돌연변이 이벤트 에 관한 것이기 때문에 여기에 게시 된 한 사람이 mutetionObserver 이지만 여전히 나는 이것을 발견 할 수 있습니다.유용합니다.

일부 노드가 DOM 에 추가되는 경우 DomSubtreeModified 이벤트에 사용 된 대안입니다.

var target = $( "#term" )[0];
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
   mutations.forEach(function( mutation ) {
       var newNodes = mutation.addedNodes; // DOM NodeList
       if( newNodes !== null ) { // If there are new nodes added

        //alert('something has been changed');

      }
   });    
});

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

.