복붙노트

[JQUERY] jQuery를에 CSS 클래스 변경에 발사 이벤트

JQUERY

jQuery를에 CSS 클래스 변경에 발사 이벤트

해결법

  1. 1.당신이 당신의 스크립트에서 클래스를 변경할 때마다, 당신은 당신의 자신의 이벤트를 발생하는 트리거를 사용할 수 있습니다.

    당신이 당신의 스크립트에서 클래스를 변경할 때마다, 당신은 당신의 자신의 이벤트를 발생하는 트리거를 사용할 수 있습니다.

    $(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged')
....
$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

    하지만 그렇지 않으면, 아니, 아니 거기에 구운하지-에서 때 클래스 변경 이벤트를 발생하는 방법. 변화 ()은 포커스 잎 그 후, 입력 된 변경의 입력을 발사.

    () {(기능 $ VAR 버튼 = $ ( '. clickme') 상자는 $를 = ( '. 상자') ; button.on ({) (, 기능을 '클릭' box.removeClass ( '상자'); $ (문서) .trigger ( 'buttonClick'); }); $ (문서) CSTE 연구진 ( 'buttonClick', 기능 () { box.text ( '클릭 수!'); }); }); .box {배경 색 : 빨강; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    안녕 <버튼 클래스 = "clickme"> 나를 클릭

    jQuery를 트리거에 대한 자세한 정보

  2. 2.이럴 더 나은 솔루션은 @ RamboNo5와 @ 제이슨에 의해 두 개의 답을 결합하는 것입니다

    이럴 더 나은 솔루션은 @ RamboNo5와 @ 제이슨에 의해 두 개의 답을 결합하는 것입니다

    나는 addClass 기능을 overridding 및 cssClassChanged라는 사용자 지정 이벤트를 추가 의미

    // Create a closure
(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    }
})();

// document ready function
$(function(){
    $("#YourExampleElementID").bind('cssClassChanged', function(){ 
        //do stuff here
    });
});

  3. 3.당신이 수준의 변화를 감지 할 경우, 가장 좋은 방법은 당신에게 모든 속성의 변화를 완벽하게 제어 할 수있는 돌연변이 관찰자를 사용하는 것입니다. 그러나 당신은 자신 리스너 정의하고, 당신이 듣고있는 요소를 추가해야합니다. 좋은 것은 당신이 리스너가 추가됩니다 수동으로하면 트리거 아무것도 필요가 없다는 것입니다.

    당신이 수준의 변화를 감지 할 경우, 가장 좋은 방법은 당신에게 모든 속성의 변화를 완벽하게 제어 할 수있는 돌연변이 관찰자를 사용하는 것입니다. 그러나 당신은 자신 리스너 정의하고, 당신이 듣고있는 요소를 추가해야합니다. 좋은 것은 당신이 리스너가 추가됩니다 수동으로하면 트리거 아무것도 필요가 없다는 것입니다.

    $(function() {
(function($) {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

    $.fn.attrchange = function(callback) {
        if (MutationObserver) {
            var options = {
                subtree: false,
                attributes: true
            };

            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(e) {
                    callback.call(e.target, e.attributeName);
                });
            });

            return this.each(function() {
                observer.observe(this, options);
            });

        }
    }
})(jQuery);

//Now you need to append event listener
$('body *').attrchange(function(attrName) {

    if(attrName=='class'){
            alert('class changed');
    }else if(attrName=='id'){
            alert('id changed');
    }else{
        //OTHER ATTR CHANGED
    }

});
});

    이 예제에서 이벤트 리스너는 모든 요소에 추가됩니다,하지만 당신은 (메모리 저장) 대부분의 경우 원하지 않는다. 당신이 관찰 원하는 요소에이 "attrchange"청취자를 추가합니다.

  4. 4.난 당신이 addClass 함수를 재정의 건의 할 것입니다. 당신은이 방법을 수행 할 수 있습니다 :

    난 당신이 addClass 함수를 재정의 건의 할 것입니다. 당신은이 방법을 수행 할 수 있습니다 :

    // Create a closure
(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // call your function
        // this gets called everytime you use the addClass method
        myfunction();

        // return the original result
        return result;
    }
})();

// document ready function
$(function(){
    // do stuff
});

  5. 5.개념의 단지 증거 :

    개념의 단지 증거 :

    약간의 주석을 참조하고 최신 유지하는 요점 봐 :

    https://gist.github.com/yckart/c893d7db0f49b1ea4dfb

    (function ($) {
  var methods = ['addClass', 'toggleClass', 'removeClass'];

  $.each(methods, function (index, method) {
    var originalMethod = $.fn[method];

    $.fn[method] = function () {
      var oldClass = this[0].className;
      var result = originalMethod.apply(this, arguments);
      var newClass = this[0].className;

      this.trigger(method, [oldClass, newClass]);

      return result;
    };
  });
}(window.jQuery || window.Zepto));

    사용법은 매우 간단합니다, 당신이 관찰하고 일반적으로 클래스를 조작 할 노드에 새로운 listender를 추가 :

    var $node = $('div')

// listen to class-manipulation
.on('addClass toggleClass removeClass', function (e, oldClass, newClass) {
  console.log('Changed from %s to %s due %s', oldClass, newClass, e.type);
})

// make some changes
.addClass('foo')
.removeClass('foo')
.toggleClass('foo');

  6. 6.최신 JQuery와 돌연변이를 사용하여

    최신 JQuery와 돌연변이를 사용하여

    var $target = jQuery(".required-entry");
            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.attributeName === "class") {
                        var attributeValue = jQuery(mutation.target).prop(mutation.attributeName);
                        if (attributeValue.indexOf("search-class") >= 0){
                            // do what you want
                        }
                    }
                });
            });
            observer.observe($target[0],  {
                attributes: true
            });

    // 업데이트 DIV 클래스를 가진 모든 코드는 $ 대상에 진입 필요 $ target.addClass ( '검색 클래스')와 같은;

  7. 7.변화는 () CSS 클래스가 추가 또는 제거하거나 정의가 변경 될 때 발생하지 않습니다. 그것은 선택 상자 값을 선택하거나 선택 취소 할 때와 같은 상황에서 발생합니다.

    변화는 () CSS 클래스가 추가 또는 제거하거나 정의가 변경 될 때 발생하지 않습니다. 그것은 선택 상자 값을 선택하거나 선택 취소 할 때와 같은 상황에서 발생합니다.

    클래스를 추가하거나 요소를 제거하면 CSS 클래스 정의가 변경되는 경우 당신이 의미하는 경우 잘 모르겠어요 (프로그램 수행하지만 지루하고하지 될 수있는 일반적으로 권장) 또는. 안정적으로 어떤 경우에 이런 일을 캡처 할 수있는 방법은 없습니다.

    당신은 물론이에 대한 자신의 이벤트를 만들 수 있지만 이것은 단지 자문으로 설명 할 수있다. 그것은 당신이 그 일을하지 않는 코드를 캡처하지 않습니다.

    또는 당신이 addClass를 대체 할 / 무시할 수 () (등) jQuery를 메소드 만 (난 당신이 너무 그 방법을 대체 할 수있는 생각하지만)가 바닐라 자바 ​​스크립트를 통해 이루어집니다이하지 않습니다 캡처.

  8. 8.또 하나의 방법은 사용자 정의 이벤트를 트리거하지 않고있다

    또 하나의 방법은 사용자 정의 이벤트를 트리거하지 않고있다

    JQuery와 릭 Strahl하여 html로 요소 CSS 변경을 모니터링하는 플러그인

    위에서 인용

  9. 9.좋은 질문. 나는 부트 스트랩 드롭 다운 메뉴를 사용하고, 부트 스트랩 드롭 다운이 숨겨져 때 이벤트를 실행하는 데 필요한거야. 드롭 다운을 열면 "버튼 그룹"의 클래스 이름을 포함하는 사업부는 "개방"의 클래스를 추가; 하고 버튼 자체는 사실에 "아리아 - 확장"속성 세트가 있습니다. 드롭 닫을 때 "개방"의 클래스 컨테이너 div에서 제거되고 아리아 발포가 참에서 거짓으로 전환된다.

    좋은 질문. 나는 부트 스트랩 드롭 다운 메뉴를 사용하고, 부트 스트랩 드롭 다운이 숨겨져 때 이벤트를 실행하는 데 필요한거야. 드롭 다운을 열면 "버튼 그룹"의 클래스 이름을 포함하는 사업부는 "개방"의 클래스를 추가; 하고 버튼 자체는 사실에 "아리아 - 확장"속성 세트가 있습니다. 드롭 닫을 때 "개방"의 클래스 컨테이너 div에서 제거되고 아리아 발포가 참에서 거짓으로 전환된다.

    즉, 클래스의 변화를 감지하는 방법이 질문에 나를 이끌었다.

    부트 스트랩으로 검출 할 수있다 "드롭 다운 이벤트"가 있습니다. 이 링크에서 "드롭 다운 이벤트"를 찾습니다. http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

    다음은 부트 스트랩 드롭 다운에이 이벤트를 사용하는 빠른 앤 더러운 예이다.

    $(document).on('hidden.bs.dropdown', function(event) {
    console.log('closed');
});

    지금은이 요구되고있는 일반적인 문제보다 더 구체적이고 실현. 하지만이 정보가 도움이 찾을 것 부트 스트랩 드롭 다운과 개방 또는 폐쇄 이벤트를 감지하려고 다른 개발자를 상상한다. 나처럼, 그들은 처음에 단순히 (분명히 그렇게 간단하지 않은) 요소 수준의 변화를 감지하려고 노력의 길을 갈 수 있습니다. 감사.

  10. 10.당신이 방법 addClass를 오버라이드 (override) 할 수있는 특정 이벤트를 트리거해야하는 경우 () 'classadded'라는 사용자 지정 이벤트가 발생합니다.

    당신이 방법 addClass를 오버라이드 (override) 할 수있는 특정 이벤트를 트리거해야하는 경우 () 'classadded'라는 사용자 지정 이벤트가 발생합니다.

    방법은 다음과 :

    (function() {
    var ev = new $.Event('classadded'),
        orig = $.fn.addClass;
    $.fn.addClass = function() {
        $(this).trigger(ev, arguments);
        return orig.apply(this, arguments);
    }
})();

$('#myElement').on('classadded', function(ev, newClasses) {
    console.log(newClasses + ' added!');
    console.log(this);
    // Do stuff
    // ...
});

  11. 11.당신은 DOMSubtreeModified 이벤트를 바인딩 할 수 있습니다. 여기 예를 추가 :

    당신은 DOMSubtreeModified 이벤트를 바인딩 할 수 있습니다. 여기 예를 추가 :

    HTML

    <div id="mutable" style="width:50px;height:50px;">sjdfhksfh<div>
<div>
  <button id="changeClass">Change Class</button>
</div>

    자바 스크립트

    $(document).ready(function() {
  $('#changeClass').click(function() {
    $('#mutable').addClass("red");
  });

  $('#mutable').bind('DOMSubtreeModified', function(e) {
      alert('class changed');
  });
});

    http://jsfiddle.net/hnCxK/13/

  12. 12.당신이 첫번째 장소에있는 클래스를 바꾼 어떤 이벤트 알고 있다면 당신은 같은 이벤트에 약간의 지연을 사용할 수 있으며,이 클래스의를 확인합니다. 예

    당신이 첫번째 장소에있는 클래스를 바꾼 어떤 이벤트 알고 있다면 당신은 같은 이벤트에 약간의 지연을 사용할 수 있으며,이 클래스의를 확인합니다. 예

    //this is not the code you control
$('input').on('blur', function(){
    $(this).addClass('error');
    $(this).before("<div class='someClass'>Warning Error</div>");
});

//this is your code
$('input').on('blur', function(){
    var el= $(this);
    setTimeout(function(){
        if ($(el).hasClass('error')){ 
            $(el).removeClass('error');
            $(el).prev('.someClass').hide();
        }
    },1000);
});

    http://jsfiddle.net/GuDCp/3/

  13. 13.

    var timeout_check_change_class;

function check_change_class( selector )
{
    $(selector).each(function(index, el) {
        var data_old_class = $(el).attr('data-old-class');
        if (typeof data_old_class !== typeof undefined && data_old_class !== false) 
        {

            if( data_old_class != $(el).attr('class') )
            {
                $(el).trigger('change_class');
            }
        }

        $(el).attr('data-old-class', $(el).attr('class') );

    });

    clearTimeout( timeout_check_change_class );
    timeout_check_change_class = setTimeout(check_change_class, 10, selector);
}
check_change_class( '.breakpoint' );


$('.breakpoint').on('change_class', function(event) {
    console.log('haschange');
});

    14. from https://stackoverflow.com/questions/1950038/firing-events-on-css-class-changes-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 업로드하기 전에 파일 크기, 이미지의 폭과 높이를 가져옵니다  (0) 2020.09.27
[JQUERY] 텍스트 () 및 HTML () : JQuery와의 차이는 무엇입니까?  (0) 2020.09.27
[JQUERY] jQuery를에 입력 변화를 감지?  (0) 2020.09.27
[JQUERY] jQuery를 사용하여 <선택>에 옵션을 추가?  (0) 2020.09.27
[JQUERY] 어떻게 다른 요소로 요소를 이동하려면?  (0) 2020.09.27
,

티스토리툴바