เหตุการณ์การยิงในการเปลี่ยนแปลงระดับ CSS ใน jQuery

ฉันจะเริ่มต้นเหตุการณ์ได้อย่างไรหากมีการเพิ่มหรือเปลี่ยนแปลงคลาส CSS โดยใช้ jQuery การเปลี่ยนคลาส CSS เป็นการเริ่มต้นchange()เหตุการณ์jQuery หรือไม่

เมื่อใดก็ตามที่คุณเปลี่ยนชั้นเรียนในสคริปต์ของคุณคุณสามารถใช้triggerเพื่อยกระดับเหตุการณ์ของคุณเอง

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

แต่ไม่เช่นนั้นจะไม่มีวิธีการที่จะยิงเหตุการณ์เมื่อมีการเปลี่ยนแปลงชั้นเรียน change()ยิงหลังจากโฟกัสแล้วปล่อยให้อินพุตถูกเปลี่ยน

$(function() {
  var button = $('.clickme')
      , box = $('.box')
  ;
  
  button.on('click', function() { 
    box.removeClass('box');
    $(document).trigger('buttonClick');
  });
            
  $(document).on('buttonClick', function() {
    box.text('Clicked!');
  });
});

.box { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">Hi</div>
<button class="clickme">Click me</button>

ข้อมูลเพิ่มเติมเกี่ยวกับ jQuery Triggers

IMHO ทางออกที่ดีกว่าคือการรวมสองคำตอบโดย @ RamboNo5 และ @Jason

ฉันหมายถึงฟังก์ชั่นการลบล้าง addClass และเพิ่มเหตุการณ์ที่กำหนดเองที่เรียกว่า 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
    });
});

หากคุณต้องการตรวจสอบการเปลี่ยนแปลงชั้นเรียนวิธีที่ดีที่สุดคือใช้ Mutation Observers ซึ่งช่วยให้คุณควบคุมการเปลี่ยนแปลงคุณสมบัติได้อย่างสมบูรณ์ อย่างไรก็ตามคุณต้องกำหนดฟังเองและผนวกเข้ากับองค์ประกอบที่คุณกำลังฟัง สิ่งที่ดีคือคุณไม่จำเป็นต้องเรียกอะไรด้วยตนเองเมื่อผู้ฟังต่อท้าย

$(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" นี้เพื่อองค์ประกอบที่คุณต้องการสังเกต

ฉันอยากจะแนะนำให้คุณแทนที่ฟังก์ชั่น 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
});

เพียงหลักฐานของแนวคิด:

ดูส่วนสำคัญเพื่อดูคำอธิบายประกอบและติดตามข้อมูลล่าสุด:

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');

ใช้การกลายพันธุ์ 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 เช่น $ target.addClass ('search-class');

change()ไม่เริ่มทำงานเมื่อมีการเพิ่มหรือลบคลาส CSS หรือการเปลี่ยนแปลงคำจำกัดความ มันจะยิงในสถานการณ์เช่นเมื่อเลือกค่าของกล่องที่เลือกหรือไม่ได้เลือก

ฉันไม่แน่ใจว่าคุณหมายถึงถ้าคำจำกัดความของคลาส CSS มีการเปลี่ยนแปลง (ซึ่งสามารถทำได้โดยทางโปรแกรม แต่น่าเบื่อและไม่แนะนำโดยทั่วไป) หรือถ้ามีการเพิ่มหรือลบคลาสในองค์ประกอบ ไม่มีวิธีใดในการบันทึกเหตุการณ์นี้ได้อย่างน่าเชื่อถือ

แน่นอนคุณสามารถสร้างกิจกรรมของคุณเองสำหรับสิ่งนี้ แต่สามารถอธิบายเป็นคำแนะนำได้เท่านั้น มันจะไม่จับรหัสที่คุณไม่ได้ทำ

อีกวิธีหนึ่งคุณสามารถแทนที่ / แทนที่addClass()(ฯลฯ ) วิธีการใน jQuery แต่สิ่งนี้จะไม่จับเมื่อมันทำผ่านทางวานิลลา Javascript (แม้ว่าฉันเดาว่าคุณสามารถแทนที่วิธีเหล่านั้นได้เช่นกัน)

มีอีกวิธีหนึ่งที่ไม่มีเรียกเหตุการณ์ที่กำหนดเอง

ปลั๊กอิน jQuery เพื่อตรวจสอบการเปลี่ยนแปลง CSS องค์ประกอบ Html โดย Rick Strahl

ข้อความจากด้านบน

ปลั๊กอินเฝ้าดูทำงานโดยเชื่อมต่อกับ DOMAttrModified ใน FireFox ไปยัง onPropertyChanged ใน Internet Explorer หรือโดยใช้ตัวจับเวลาด้วย setInterval เพื่อจัดการการตรวจจับการเปลี่ยนแปลงสำหรับเบราว์เซอร์อื่น น่าเสียดายที่ WebKit ไม่สนับสนุน DOMAttrModified อย่างสม่ำเสมอในขณะนี้ดังนั้น Safari และ Chrome ต้องใช้กลไก setInterval ที่ช้ากว่า

คำถามที่ดี. ฉันใช้เมนู Bootstrap ดร็อปดาวน์และจำเป็นต้องดำเนินการกิจกรรมเมื่อมีการซ่อน Bootstrap Dropdown เมื่อดร็อปดาวน์ถูกเปิด div ที่มีชื่อคลาสของ "button-group" จะเพิ่มคลาสของ "open"; และปุ่มนั้นมีแอตทริบิวต์ "aria-expand" ที่ตั้งค่าเป็นจริง เมื่อดรอปดาวน์ถูกปิดคลาสของ "open" นั้นจะถูกลบออกจาก div ที่มีอยู่และ aria-expanded จะถูกเปลี่ยนจาก true เป็น false

นั่นทำให้ฉันเกิดคำถามนี้ถึงวิธีการตรวจสอบการเปลี่ยนแปลงของชั้นเรียน

ด้วย Bootstrap จะมี "เหตุการณ์ดรอปดาวน์" ที่สามารถตรวจพบได้ มองหา "เหตุการณ์แบบเลื่อนลง" ที่ลิงค์นี้ http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

นี่คือตัวอย่างรวดเร็วและสกปรกของการใช้เหตุการณ์นี้ใน Bootstrap Dropdown

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

ตอนนี้ฉันรู้แล้วว่านี่เป็นคำถามที่เฉพาะเจาะจงกว่าคำถามทั่วไปที่ถูกถาม แต่ฉันคิดว่านักพัฒนาซอฟต์แวร์รายอื่นพยายามตรวจจับเหตุการณ์เปิดหรือปิดด้วย Bootstrap Dropdown จะพบว่ามีประโยชน์ เช่นเดียวกับฉันพวกเขาอาจเริ่มเส้นทางของการพยายามตรวจสอบการเปลี่ยนแปลงระดับองค์ประกอบ (ซึ่งเห็นได้ชัดว่าไม่ง่ายเลย) ขอบคุณ

หากคุณต้องการทริกเกอร์เหตุการณ์เฉพาะคุณสามารถแทนที่เมธอด addClass () เพื่อเรียกใช้เหตุการณ์ที่กำหนดเองที่เรียกว่า '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
    // ...
});

คุณสามารถผูกเหตุการณ์ DOMSubtreeModified ฉันเพิ่มตัวอย่างที่นี่:

HTML

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

JavaScript

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

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

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

หากคุณทราบว่ามีเหตุการณ์ใดที่เปลี่ยนคลาสในตอนแรกคุณอาจใช้ความล่าช้าเล็กน้อยในเหตุการณ์เดียวกันและตรวจสอบคลาส ตัวอย่าง

//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/

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');
});