CODEWITHSUNDEEP
javascriptjqueryjquery-events
theShadow89
theShadow89

Reputation: 1549

jQuery fire function when element specific class change

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?

Upvotes: 3

Views: 2112

Answers (5)

tormorten
tormorten

Reputation: 81

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.

Upvotes: 0

theShadow89
theShadow89

Reputation: 1549

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

Upvotes: 0

Ferret
Ferret

Reputation: 1440

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

Upvotes: 0

Awesomestvi
Awesomestvi

Reputation: 803

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

Upvotes: 1

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2606

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

     }
 });

Upvotes: 1

Related Questions