jQuery.on() - 요소를로드하자마자 초기화하는 방법

Question

내 페이지의 요소에 hoverIntent 플러그인을 추가하려고하지만 나중에 DOM에 일부 요소가 추가됩니다. 즉, 플러그인을 미래 요소에도 바인딩해야합니다. 어떻게 그걸합니까? 그래서 몇 번이나 같은 질문을 보았습니다.하지만 아무도 명확한 해결책이 없습니까?

Answer 1

jQuery에서이를 지원하지 않습니다. 플러그인 자체가 지원해야하는 것입니다. 가장 일반적인 방법은 새 콘텐츠를 추가 한 후 플러그인을 다시 초기화하는 것입니다. 이는 일반적으로 문제가되지 않습니다.

또 다른 옵션은 liveQuery plugin을 사용하고 다음과 같이하십시오.

$('yourSelector').livequery(function() { 
    $(this).hoverIntent({ 
     // blah 
    }); 
}); 

Answer 2

이 작업을 수행하는 가장 좋은 방법은 새 요소를 페이지에 추가 할 때 사용자 지정 이벤트를 발생시키는 것입니다. 이 이벤트 구독자는 적절한 hoverIntent 초기화 프로그램을 호출 할 수 있습니다.

mutation observers 형태로 더 많은 기본 지원이 제공되지만 브라우저 지원은 현재 nil 옆에 있습니다.

DOMSubtreeModifed 이벤트 수신은 신뢰할 수 없으며 주요 성능 문제가 발생합니다.

Answer 3

jquery 구조체를 변경하려고합니다.

ABC = { 
    init: function() {//all function names goes here 
     ABC.myFunction1(); 
     ABC.myFunction2(); 
     ABC.myFunction3(); 
    }, 
    myFunction1: function() { 
    //code 
    }, 
    myFunction2: function() { 
    //code 
    }, 
    myFunction3: function() { 
    //code 
    }//dont put comma last one 
} 

$(function() { 
    ABC.init();//calls all functions after everything is initialized and ready. 
}); 

Answer 4

이벤트 위임에 대해 "선택"매개 변수를 사용합니다.

$('#PARENT').hoverIntent({ 
    over: function() { 
     console.log($(this)); 
    }, 
    out: function(){ 
     console.log($(this)); 
    }, 
    selector: '.CHILD' 
}); 

출처 : hoverIntent Documentation