[JQUERY] 어떻게 jQuery를 사용하여 클래스의 변화에 ​​이벤트를 발생 하는가?

어떻게 jQuery를 사용하여 클래스의 변화에 ​​이벤트를 발생 하는가?

해결법

1. ---

   1.클래스가 변경 될 때 발생 아무런 이벤트가 없습니다. 대안은 당신이 프로그래밍 방식으로 클래스를 변경할 때 수동으로 이벤트를 발생하는 것입니다 :

   클래스가 변경 될 때 발생 아무런 이벤트가 없습니다. 대안은 당신이 프로그래밍 방식으로 클래스를 변경할 때 수동으로 이벤트를 발생하는 것입니다 :

   $someElement.on('event', function() {
       $('#myDiv').addClass('submission-ok').trigger('classChange');
   });
   
   // in another js file, far, far away
   $('#myDiv').on('classChange', function() {
        // do stuff
   });
   

   최신 정보

   이 질문은, 그래서 여기에 일부 방문자를 수집하는 것으로 보인다 새로운 MutationObserver를 사용하여 기존 코드를 수정할 필요없이 사용할 수있는 방법에 대한 업데이트입니다 :

   VAR $ DIV = $ ( "# foo는"); var에 관찰자 = 새로운 MutationObserver (기능 (돌연변이) { mutations.forEach (기능 (돌연변이) { (mutation.attributeName === "클래스") {경우 VAR의 AttributeValue = $ (mutation.target) .prop (mutation.attributeName); CONSOLE.LOG는 ( "클래스 속성으로 변경 :"의 AttributeValue); } }); }); observer.observe의 ($ DIV [0], { 속성 : 사실 }); $ div.addClass ( '빨간색'); {.red 색상 : # C00; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   # foo.bar

   MutationObserver 구체적으로, 크롬 (26), FF (14), IE 11 새 브라우저에서만 사용할 수 있습니다주의, 오페라 15, 자세한 내용은 사파리 6. 참조 MDN. 당신이 지원 레거시 브라우저에 필요한 경우에 당신은 내 첫 번째 예제에 설명 된 방법을 사용해야합니다.

2. ---

   2.원래 함수를 호출하고 사용자 정의 이벤트를 트리거 할 자신의 원래 jQuery를 addClass 및 removeClass 기능을 대체 할 수있다. (자동 호출 익명 함수를 사용하여 원래의 함수 참조를 포함하는)

   원래 함수를 호출하고 사용자 정의 이벤트를 트리거 할 자신의 원래 jQuery를 addClass 및 removeClass 기능을 대체 할 수있다. (자동 호출 익명 함수를 사용하여 원래의 함수 참조를 포함하는)

   (function( func ) {
       $.fn.addClass = function() { // replace the existing function on $.fn
           func.apply( this, arguments ); // invoke the original function
           this.trigger('classChanged'); // trigger the custom event
           return this; // retain jQuery chainability
       }
   })($.fn.addClass); // pass the original function as an argument
   
   (function( func ) {
       $.fn.removeClass = function() {
           func.apply( this, arguments );
           this.trigger('classChanged');
           return this;
       }
   })($.fn.removeClass);
   

   예상대로 그런 다음 나머지 코드는 간단하다.

   $(selector).on('classChanged', function(){ /*...*/ });
   

   최신 정보:

   이 방법은 클래스 만 jQuery를 addClass 및 removeClass 방법을 통해 변경 될 것이라는 가정을한다. 수업은 여기 허용 대답에 설명해야 할 것 같은 MutationObservers 같은 것을 사용 (예 : DOM 요소를 통해 클래스 속성을 직접 조작 등) 다른 방법으로 수정하는 경우.

   또한 이러한 방법에 대한 몇 가지 개선 등 :

   이러한 대체 기능을 사용하면 다음 콜백 함수의 인수를 확인하여 추가하거나 제거 할 classChanged 또는 특정 클래스를 통해 변경된 클래스를 처리 할 수 ​​있습니다 :

   $(document).on('classAdded', '#myElement', function(event, className) {
       if(className == "something") { /* do something */ }
   });
   

3. ---

   3.자신의 이벤트를 발생하는 트리거를 사용합니다. 당신은 이름을 가진 클래스 추가 트리거를 변경하면 이제까지

   자신의 이벤트를 발생하는 트리거를 사용합니다. 당신은 이름을 가진 클래스 추가 트리거를 변경하면 이제까지

   JS 바이올린 DEMO

   $("#main").on('click', function () {
       $("#chld").addClass("bgcolorRed").trigger("cssFontSet");
   });
   
   $('#chld').on('cssFontSet', function () {
   
       alert("Red bg set ");
   });
   

   jQuery를 알아보기 : 간단하고 쉽게 jQuery를 블로그 자습서

4. ---

   4.이 같은 것을 사용할 수 있습니다 :

   이 같은 것을 사용할 수 있습니다 :

   $(this).addClass('someClass');
   
   $(Selector).trigger('ClassChanged')
   
   $(otherSelector).bind('ClassChanged', data, function(){//stuff });
   

   하지만, 그렇지 않으면, 때 클래스 변경 이벤트를 발생하는 미리 정의 된 기능이 없습니다.

   여기 트리거에 대해 자세히 알아보기

from https://stackoverflow.com/questions/19401633/how-to-fire-an-event-on-class-change-using-jquery by cc-by-sa and MIT license