Given an HTML document with heading and button, jQuery should fire an event when the CSS class of the button changes.
Approach: In jQuery, there is no provision to trigger an event on class change. An alternative method is to manually raise an event when you programmatically change the class using the trigger() function. The trigger() function will raise an event whenever the class of the button is changed.
Initially the page looked like the following image.
On clicking the button, an alert message pops up indicating that the listener was fired and the CSS class of the button has changed.
After closing the popup, the button’s CSS class changed (notice the green background color and white text).
- How to fire an event on file select using jQuery ?
- jQuery callbacks.fire() Method
- How to override the CSS properties of a class using another CSS class ?
- JQuery | Detect a textbox content is changed or not
- How to create a CSS rule or class at runtime using jQuery ?
- How to find the parent class name with known class in jQuery ?
- How to unbind “hover” event using JQuery?
- How to Remove an Event Handler using jQuery ?
- jQuery | Selectors and Event Methods
- jQuery | event.timeStamp property with Example
- jQuery | event.type property with Examples
- jQuery | event.pageX property with Examples
- jQuery | event.pageY property with examples
- jQuery | event.which property with Examples
- jQuery | event.relatedTarget Property with Example
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.