jQuery fire function when element specific class change

Question

I need to trigger an event when i add a specific class on button, but I have no idea how to make it listen to the class adding event.

I have something like this:

<script type="text/javascript">   

$(document).ready(function() {
 

    $(id_element).addClass("active");
 
     //this function will fire on add "active" class to "id_button" element
     function fireOnActiveClass() {
        //do something
     }


} 

</script>

I can't touch code $(id_element).addClass("active");, for more reasons.

Currently I use jQuery 1.7.2

Could you please tell me how or which I need to know?

There are many different ways to do that but the question would be why you need that regarding your posted code because obviously you already know when you add this specific class — A. Wolff
– A. Wolff, Commented Dec 5, 2014 at 13:07
If you don't need to support older browsers, you could use animation/transition end event using fake animation/transition and using specific CSS rule. Or extend addClass() method to trigger custom event, or... — A. Wolff
– A. Wolff, Commented Dec 5, 2014 at 13:14

Mathieu Labrie Parent · Accepted Answer · 2014-12-05 13:05:52Z

1

You are modifying the class of the control in your code. So why not simply call the click of the button when you change the class ?

$(id_element).addClass("active");
$(id_button).click();

$(id_button).click(function () {
     if ($(this).hasClass) {
     //do something

     }
 });

answered Dec 5, 2014 at 13:05

Mathieu Labrie Parent

2,6061 gold badge12 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Awesomestvi · Accepted Answer · 2014-12-05 13:06:30Z

1

There is no event raised when a class changes. The alternative is to manually raise an event when you programatically change the class:

$(document).ready(function() {
    $(id_element).addClass("active").trigger('classChange');
    $(id_element).on('classChange', function() {
         // do stuff
    });
});

answered Dec 5, 2014 at 13:06

Awesomestvi

8131 gold badge7 silver badges14 bronze badges

3 Comments

A. Wolff Over a year ago

Why would you need to trigger a custom event here? Just call method once class is added

Terry Over a year ago

@A.Wolff Triggering a custom event offers more flexibility and allows one to listen to event bubbling, perhaps? It is also more extensible.

A. Wolff Over a year ago

But as you still need to trigger it, I don't see any purpose here (regarding this concrete example) PS: ya regarding flexibility and maybe bubbling

Ferret · Accepted Answer · 2014-12-05 13:10:48Z

0

One other way would be to call a function right after adding the class like:

$.fn.classAdded = function() {
    var $button = $(this);
    if($button.hasClass('id_button')) {
        // ...
    }
    return $button;
}

$(id_element).addClass("active").classAdded();

answered Dec 5, 2014 at 13:10

Ferret

1,4402 gold badges12 silver badges17 bronze badges

Comments

theShadow89 · Accepted Answer · 2014-12-05 16:29:29Z

0

I have found solution using this jQuery Plugin: http://meetselva.github.io/attrchange/

answered Dec 5, 2014 at 16:29

theShadow89

1,54926 silver badges57 bronze badges

Comments

tormorten · Accepted Answer · 2015-06-09 13:57:11Z

0

Could this jQuery plugin be any help?

https://github.com/tormjens/jquery-dom-router

You can change the default element using $.DOMRouter.defaults.element = '#element'; before initalizing the plugin.

answered Jun 9, 2015 at 13:57

tormorten

812 silver badges6 bronze badges

Collectives™ on Stack Overflow

jQuery fire function when element specific class change

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related