সিএসএস ক্লাসে অগ্নিসংযোগের ঘটনাগুলি jQuery এ পরিবর্তিত হয়

Question

যদি কোনও সিএসএস ক্লাস jQuery ব্যবহার করে যুক্ত করা বা পরিবর্তন করা হয় তবে আমি কীভাবে একটি ইভেন্ট নিক্ষেপ করতে পারি? সিএসএস শ্রেণি পরিবর্তনের ফলে কি jQuery change()ইভেন্টের আগুন ?

Comments

7 বছর পরে, আধুনিক ব্রাউজারগুলিতে মিউটেশনঅবার্সারদের মোটামুটি বিস্তৃত গ্রহণের সাথে, এখানে গৃহীত উত্তরটি সত্যই মিঃ ব্রের হয়ে আপডেট হওয়া উচিত ।

— জোয়েলমদেব

এটি আপনাকে সাহায্য করতে পারে। stackoverflow.com/questions/2157963/…

— পিএসআর

জেসনের উত্তরের সমাপ্তিতে, আমি এটি পেয়েছি: stackoverflow.com/a/19401707/1579667

— বেঞ্জ

Answer 1

যখনই আপনি আপনার স্ক্রিপ্টে কোনও শ্রেণি পরিবর্তন করেন, আপনি 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 ট্রিগারগুলিতে আরও তথ্য

Comments

তারপরে ইভেন্টটিকে ট্রিগার করার সাথে কী ডিল হয় যার পরে কোনও ফাংশন বলা হয়? কেন ফাংশনটি ট্রিগার না করে সরাসরি কল করবেন?

— র‌্যাম্বোনো 5

ট্রিগারিং এমন একটি প্রক্রিয়া যা নির্দিষ্ট উপাদানগুলিকে একটি ইভেন্টে "সাবস্ক্রাইব" করতে দেয়। এইভাবে, যখন ইভেন্টটি ট্রিগার করা হয়, সেই ইভেন্টগুলি সমস্ত একবারে ঘটতে পারে এবং তাদের নিজ নিজ কার্যকারিতা চালায়। উদাহরণস্বরূপ, আমার যদি এমন একটি বস্তু থাকে যা লাল থেকে নীল হয়ে পরিবর্তিত হয় এবং তিনটি অবজেক্ট পরিবর্তিত হওয়ার অপেক্ষায় থাকে, যখন এটি পরিবর্তিত হয়, আমি কেবল changeColorইভেন্টটি ট্রিগার করতে পারি এবং সেই ইভেন্টে সাবস্ক্রাইব করা সমস্ত বস্তু সেই অনুযায়ী প্রতিক্রিয়া জানাতে পারে।

— জেসন

কিছুটা আশ্চর্যজনক মনে হচ্ছে যে ওপি একটি 'cssClassChanged' ইভেন্ট শুনতে চায়; ক্লাসটি অন্য কিছু 'অ্যাপ্লিকেশন' ইভেন্টের ফলস্বরূপ যুক্ত হয়েছিল যেমন 'কলরচেনজড' যা ট্রিগার দিয়ে ঘোষণা করা আরও বোধগম্য হবে কারণ আমি কেন ভাবতে পারি না যে কেন বিশেষত কোনও শ্রেণির নাম পরিবর্তনে আগ্রহী হবে, এটি আরও বেশি ক্লাসের ফলাফল নিশ্চয়ই চ্যাঞ্জ করবেন?

— রিসিকারট

যদি এটি বিশেষত কোনও শ্রেণীর নাম পরিবর্তন ছিল যা আগ্রহের বিষয় ছিল তবে আমি jQuery.fn.addClass কে 'cssClassChanged' ট্রিগার করতে সজ্জিত করার মতো @ মাইক্রডের মতো আরও বুদ্ধিমান বলে মনে করব

— রিসারকোট

@ ক্রিসারোট আমি অপির প্রয়োগ সম্পর্কে জানতে অনুমান করি না। আমি কেবল তাদের পাব / সাব ধারণার সাথে উপস্থাপন করছি এবং তারা চাইলে এটি প্রয়োগ করতে পারে। দেওয়া তথ্যের পরিমাণের সাথে প্রকৃত ইভেন্টের নামটি কী হওয়া উচিত তা নিয়ে বিতর্ক করা বোকামি।

— জেসন

Answer 2

আইএমএইচও আরও ভাল সমাধান হ'ল @ র্যাম্বনো 5 এবং @ জেসন দ্বারা দুটি উত্তর একত্রিত করা

আমার অর্থ অ্যাডক্লাস ফাংশনকে ওভাররাইড করা এবং একটি কাস্টম ইভেন্ট বলা হয় 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
    });
});

Comments

এটি প্রকৃতপক্ষে সর্বোত্তম পদ্ধতির মতো মনে হচ্ছে, তবে যদিও আমি ইভেন্টটিকে কেবল "#YourExampleElementID" এর সাথে আবদ্ধ করি, তবে মনে হয় যে সমস্ত শ্রেণীর পরিবর্তন (যেমন, আমার পৃষ্ঠার কোনও উপাদানগুলিতে) এই হ্যান্ডলার দ্বারা পরিচালিত হয়েছে ... কোনও চিন্তা?

— ফিলিপ Correia

এটি আমার জন্য ফিলিপকোরিয়া ভাল কাজ করে। আপনি কি দয়া করে আপনার মামলার প্রতিলিপি দিয়ে একটি জিসফিল সরবরাহ করতে পারেন?

— আরশ মিলানি

@ গোলডেন্টোয়া ১১ আপনার কিছুটা সন্ধ্যা বা সাপ্তাহিক ছুটি কাটাতে হবে এবং একটি সাধারণ পেজলোডে যা বিজ্ঞাপন প্রচুর পরিমাণে ব্যবহার করে সেগুলিতে যা ঘটে তা পর্যবেক্ষণ করা উচিত। স্ক্রিপ্টগুলির ভলিউম (কখনও কখনও সর্বাধিক দর্শনীয় উপায়ে ব্যর্থ) এর মতো জিনিসগুলি করার চেষ্টা করে আপনি উড়ে যাবেন। $()আসল ক্রিয়াটি শুরু হওয়ার পরে, আপনি প্রতি সেকেন্ডে কয়েকটা ডোমনোডইন্টার্ড / ডিওএমএসবিট্রি মডিড ইভেন্টগুলিকে আগুন দিয়েছিলেন ।

— L0j1k

আপনি সম্ভবত মুছে ফেলুন ক্লাসে একই ইভেন্টটি ট্রিগার করতে সমর্থন করতে চান

— দারিয়াস

আরশ, আমি অনুমান করি যে আমি কেন ফিলিপকোরিয়া এই পদ্ধতির সাথে কিছু সমস্যা অনুভব করছিলাম: আপনি যদি এই cssClassChangedইভেন্টটিকে কোনও উপাদানকে বেঁধে রাখেন তবে আপনাকে অবশ্যই সচেতন হতে হবে যে তার শিশুরা তাদের শ্রেণি পরিবর্তন করলেও এটি বরখাস্ত করা হবে। অতএব যদি উদাহরণস্বরূপ আপনি তাদের জন্য এই ইভেন্টটি চালিত করতে না চান তবে কেবল $("#YourExampleElementID *").on('cssClassChanged', function(e) { e.stopPropagation(); });আপনার বাইন্ডের মতো কিছু যুক্ত করুন। যাইহোক, সত্যিই দুর্দান্ত সমাধান, ধন্যবাদ!

— টোনিক্স

Answer 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
    }

});
});

এই উদাহরণে ইভেন্ট শ্রোতা প্রতিটি উপাদানগুলিতে যুক্ত হয় তবে আপনি এটি বেশিরভাগ ক্ষেত্রেই (স্মৃতি সংরক্ষণ করুন) চান না। আপনি যে উপাদানটি পর্যবেক্ষণ করতে চান তাতে এই "অ্যাট্রিচেন" শ্রোতাকে যুক্ত করুন।

Comments

দেখে মনে হচ্ছে এটি গ্রহণযোগ্য উত্তরটি ঠিক একই কাজ করছে তবে আরও কোড সহ কিছু ব্রাউজারে অসমর্থিত এবং কম নমনীয়তার সাথে। এর একমাত্র উপকারটি হ'ল এটি হ'ল এটি হ'ল প্রতিটি সময় পৃষ্ঠায় কিছু পরিবর্তন ঘটে যা আপনার পারফরম্যান্সকে একেবারে ধ্বংস করে দেয় ...

— জেসন

উত্তরে আপনার বক্তব্যটি @ জসন ভুল, আপনি যদি কোনও ট্রিগার নিজেই সক্রিয় করতে না চান তবে স্বয়ংক্রিয়ভাবে এটি সক্রিয় করতে চান তবে এটি করার উপায়টি এই। এটি কেবল এটির উপকারই নয়, এটিকে প্রশ্ন করা হয়েছিল। দ্বিতীয়ত, এটি কেবল একটি উদাহরণ ছিল এবং যেমন এটি উদাহরণ হিসাবে বলেছে এটি প্রতিটি শ্রোতার কাছে ইভেন্ট শ্রোতাদের সংযুক্ত করার পরামর্শ দেওয়া হয়নি তবে কেবল আপনি শুনতে চান এমন উপাদানগুলিতে, সুতরাং কেন এটি সম্পাদনাকে নষ্ট করবে তা আমি বুঝতে পারি না। এবং শেষ কথা, এটি ভবিষ্যত, বেশিরভাগ সর্বশেষ ব্রাউজার এটি সমর্থন করে, caniuse.com/#feat=mutesobserver। দয়া করে সম্পাদনা পুনর্বিবেচনা করুন, এটি সঠিক উপায়।

— মিঃ বিআর

InsertionQ গ্রন্থাগার তোমাকে ধরি করে DOM দেখানো নোড যদি তাদের নির্বাচক মেলে দেয়। এটির বিস্তৃত ব্রাউজার সমর্থন রয়েছে কারণ এটি ব্যবহার করে না DOMMutationObserver।

— ড্যান ড্যাসক্লেসকু

এটি একটি দুর্দান্ত সমাধান। বিশেষত ক্যানভাস বা এসভিজি অ্যানিমেশনগুলি শুরু এবং বন্ধ করার জন্য যখন কোনও শ্রেণি যুক্ত করা হয় বা সরানো হয়। আমার ক্ষেত্রে নিশ্চিত হয়ে গেছে যে স্ক্রোলটি দেখার বাইরে এগুলি চলমান নয়। খুব সুন্দর!

— বিবিসিঞ্জার

2019 এর জন্য, এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। সমস্ত বড় ব্রাউজারগুলি এখন মিউটেশন পর্যবেক্ষকদের সমর্থন করে বলে মনে হয় এবং এই সমাধানটির জন্য ম্যানুয়ালি ইভেন্টগুলিকে গুলি চালানো বা বেসিক jQuery কার্যকারিতা পুনরায় লেখার প্রয়োজন হয় না।

— sp00n 13

Answer 4

আমি আপনাকে অ্যাডক্লাস ফাংশন ওভাররাইড করার পরামর্শ দেব। আপনি এটি এইভাবে করতে পারেন:

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

Comments

এটি জেসনের $ (মাইসলেক্টর)। ট্রিগার ('cssClassChanged') এর সাথে একত্রিত করা আমার মনে হয় সেরা পন্থা।

— kosoant

একটি প্লাগইন রয়েছে যা এটি সাধারণভাবে করে: github.com/aheckmann/jquery.hook/blob/master/jquery.hook.js

— জের্ফ

ভবিষ্যতের রক্ষণাবেক্ষণকারীকে বিভ্রান্ত করার দুর্দান্ত উপায় বলে মনে হচ্ছে।

— রাউফাম্যাটিক

মূল পদ্ধতির ফলাফলটি ফিরিয়ে দিতে ভুলবেন না।

— পেটাহ

রেফারেন্সের জন্য, আপনি প্রক্সি প্যাটার্ন ব্যবহার করছেন en.wikedia.org/wiki/Proxy_

— দারিয়াস

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

ব্যবহারটি বেশ সহজ, আপনি নোডে একটি নতুন লিজেন্ডার যুক্ত করুন যা আপনি ক্লাসগুলি পর্যবেক্ষণ করতে এবং পরিচালনা করতে চান:

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

Comments

এটি আমার পক্ষে কাজ করেছে, আমি সরানো ক্লাস পদ্ধতিতে পুরানো বা নতুন ক্লাসটি পড়তে পারি না except

— slashdottir

@ স্ল্যাশডোটার আপনি কি একটি ফ্রিডল তৈরি করতে পারেন এবং ঠিক কী কাজ করে না তা ব্যাখ্যা করতে পারেন ।

— ইয়াকার্ট

হ্যাঁ ... কাজ করে না। প্রকারের ত্রুটি: এটি [0] এ [0] .ক্লাসনামে ফেরান und

— পেড্রো

এটি কাজ করে কিন্তু কখনও কখনও (কেন?) this[0]var oldClassvar newClass= (this[0] ? this[0].className : "");

— অপরিজ্ঞাত হয়

Answer 6

সর্বশেষ 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
            });

// এমন কোনও কোড যা ডিভিড আপডেট করে যা ক্লাসের প্রয়োজনীয়-এন্ট্রি থাকে যা $ টার্গেটে। টার্গেটে থাকে। টার্গেট.এডিডি ক্লাস ('অনুসন্ধান-শ্রেণি');

Comments

ভাল সমাধান, আমি এটি ব্যবহার করছি। তবে, আমি প্রতিক্রিয়া ব্যবহার করছি এবং সমস্যাগুলির মধ্যে একটি হ'ল প্রতিবার ওয়েব উপাদানটি কার্যত উত্পন্ন হওয়ার সময় আমি একটি পর্যবেক্ষক যুক্ত করি। কোনও পর্যবেক্ষক ইতিমধ্যে উপস্থিত আছে কিনা তা পরীক্ষা করার কোনও উপায় আছে?

— মিকাউল মায়ার

আমি মনে করি এটি

— অবমাননিত হয়েছে

@ ওয়েবডুড ০৪৮২ মিউটেশনঅবার্সার.ওবাইজারকে অবহিত করা হয়নি কারণ এটি "মিউটেশনঅবার্সার" এর "ইনস্ট্যান্স পদ্ধতি"। বিকাশকারী.মোজিলা.অর্গ.ইন-

— ইউএস / ডকস / ওয়েবে / এপিআই / মিউটেশনউবার্সার

Answer 7

change()যখন কোনও সিএসএস ক্লাস যুক্ত বা সরিয়ে ফেলা হয় বা সংজ্ঞা পরিবর্তিত হয় তখন আগুন জ্বলবে না। এটি যখন নির্বাচিত বাক্সের মানটি নির্বাচিত বা নির্বাচিত না হয় এমন পরিস্থিতিতে আগুন দেয়।

আমি নিশ্চিত না যে আপনি যদি সিএসএস শ্রেণির সংজ্ঞা পরিবর্তিত হয়ে থাকেন (যা প্রোগ্রামিকভাবে করা যায় তবে ক্লান্তিকর এবং সাধারণত প্রস্তাবিত হয় না) বা কোনও শ্রেণিতে কোনও উপাদান যুক্ত করা বা অপসারণ করা হয় কিনা তা নিশ্চিত না not উভয় ক্ষেত্রেই এই ঘটনাটি নির্ভরযোগ্যভাবে ক্যাপচার করার কোনও উপায় নেই।

আপনি অবশ্যই এটির জন্য নিজের ইভেন্ট তৈরি করতে পারেন তবে এটি কেবল উপদেষ্টা হিসাবে বর্ণনা করা যেতে পারে । এটি কোডটি ক্যাপচার করবে না যা এটি আপনার করছে না।

বিকল্পভাবে আপনি addClass()jQuery এ (ইত্যাদি) পদ্ধতিগুলিকে ওভাররাইড / প্রতিস্থাপন করতে পারেন তবে ভ্যানিলা জাভাস্ক্রিপ্টের মাধ্যমে হয়ে গেলে এটি ক্যাপচার করবে না (যদিও আমি মনে করি আপনিও এই পদ্ধতিগুলি প্রতিস্থাপন করতে পারেন)।

Answer 8

একটি কাস্টম ইভেন্ট ট্রিগার না করে আরও একটি উপায় আছে

রিক স্ট্রহলের এইচটিএমএল এলিমেন্ট সিএসএস পরিবর্তনগুলি নিরীক্ষণ করার জন্য একটি jQuery প্লাগ-ইন

উপরে থেকে উদ্ধৃতি

ঘড়ি প্লাগ-ইন ফায়ারফক্সে ডিওএমএটিট্রোমডিফায়েড, ইন্টারনেট এক্সপ্লোরার-এ প্রোপার্টি চেঞ্জ করা বা অন্যান্য ব্রাউজারগুলির পরিবর্তনের সনাক্তকরণ পরিচালনা করতে সেট-ইনটারওয়াল সহ একটি টাইমার ব্যবহার করে কাজ করে। দুর্ভাগ্যক্রমে ওয়েবকিট এই মুহূর্তে ধারাবাহিকভাবে ডোম্যাট্রাস্টমোডিকে সমর্থন করে না তাই সাফারি এবং ক্রোমকে বর্তমানে ধীর গতির সেট অন্তর্বর্তী প্রক্রিয়াটি ব্যবহার করতে হবে।

Answer 9

ভাল প্রশ্ন. আমি বুটস্ট্র্যাপ ড্রপডাউন মেনু ব্যবহার করছি এবং যখন বুটস্ট্র্যাপ ড্রপডাউনটি লুকানো ছিল তখন একটি ইভেন্ট চালানো দরকার। যখন ড্রপডাউনটি খোলা হয়, "বোতাম-গোষ্ঠী" এর শ্রেণীর নামের সাথে থাকা ডিভটি "ওপেন" শ্রেণি যুক্ত করে; এবং বোতামটিতে নিজেই একটি "আরিয়া-প্রসারিত" বৈশিষ্ট্য সেট করা আছে। যখন ড্রপডাউনটি বন্ধ হয়ে যায়, তখন "ওপেন" শ্রেণীর বিভাগটি ডিভযুক্ত ডিভাইস থেকে সরানো হয় এবং এরিয়া-প্রসারিতটি সত্য থেকে মিথ্যাতে স্যুইচ করা হয়।

এটি আমাকে এই প্রশ্নে নিয়ে যায়, শ্রেণি পরিবর্তন কীভাবে সনাক্ত করতে হয়।

বুটস্ট্র্যাপের সাহায্যে এমন "ড্রপডাউন ইভেন্ট" রয়েছে যা সনাক্ত করা যায়। এই লিঙ্কটিতে "ড্রপডাউন ইভেন্ট" অনুসন্ধান করুন। http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

বুটস্ট্র্যাপ ড্রপডাউনতে এই ইভেন্টটি ব্যবহারের একটি দ্রুত এবং নোংরা উদাহরণ।

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

এখন আমি বুঝতে পারি যে এটি জিজ্ঞাসা করা সাধারণ প্রশ্নের চেয়ে বেশি নির্দিষ্ট। তবে আমি কল্পনা করি যে অন্য বিকাশকারীরা একটি বুটস্ট্র্যাপ ড্রপডাউন দিয়ে একটি খোলা বা বন্ধ ইভেন্ট সনাক্ত করার চেষ্টা করছেন এটি সহায়ক হিসাবে খুঁজে পাবে। আমার মতো, তারা প্রাথমিকভাবে কোনও উপাদান শ্রেণীর পরিবর্তন (যা সম্ভবত এতো সহজ নয়) সনাক্ত করার চেষ্টা করার পথে যেতে পারে। ধন্যবাদ।

Answer 10

আপনার যদি কোনও নির্দিষ্ট ইভেন্ট ট্রিগার করতে হয় তবে আপনি 'শ্রেণিবদ্ধ' নামক একটি কাস্টম ইভেন্ট ফায়ার করতে পদ্ধতি অ্যাডক্লাস () পদ্ধতিটিকে ওভাররাইড করতে পারেন।

এখানে কীভাবে:

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

Answer 11

আপনি DOMSubtreeModified ইভেন্টটিকে আবদ্ধ করতে পারেন। আমি এখানে একটি উদাহরণ যুক্ত করছি:

এইচটিএমএল

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

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

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