Execute a jQuery function every time the class of the parent container div changes

Question

Execute a jQuery function every time the class of the parent container div changes

I am seeking to trigger the function below whenever its containing div parent

<div class="section">...</div>

transitions to an "active" state, for example:

<div class="section active">...</div>

$(".skills-grid__col").each(function () {
    var left = $(this).data('left');
    $(this).animate({
        opacity: 1,
        left: left
    }, 1200);
});

<div class="section">
    <div class="skills-grid__col"></div>
    <div class="skills-grid__col"></div>
</div>

What type of event would be appropriate in this scenario?

javascript jquery html css

Answer 1

Answer №1

There are limitations when it comes to working with events in older browsers.

If removing support for IE10 is acceptable, you have the option to utilize a MutationObserver that will detect changes in the element :

var observer = new MutationObserver(function(mutations) {
  if ($yourElement.hasClass('active')) {
     // perform actions
  }
});
observer.observe($yourElement[0], {attributes: true});

If dropping IE10 support is not an option and you prefer not to continuously check the element, your best bet would be to intercept the section where the class changes. Additionally, you could create a workaround by periodically verifying the class if window.MutationObserver is undefined.

Answer 2

There are limitations when it comes to working with events in older browsers.

If removing support for IE10 is acceptable, you have the option to utilize a MutationObserver that will detect changes in the element :

var observer = new MutationObserver(function(mutations) {
  if ($yourElement.hasClass('active')) {
     // perform actions
  }
});
observer.observe($yourElement[0], {attributes: true});

If dropping IE10 support is not an option and you prefer not to continuously check the element, your best bet would be to intercept the section where the class changes. Additionally, you could create a workaround by periodically verifying the class if window.MutationObserver is undefined.

Execute a jQuery function every time the class of the parent container div changes

Answer №1

Similar questions

Hitting a button causes Ajax.load to malfunction

React: Trying to use the map function on an empty array will result in an error

Boost Page Text Size Using CSS

What are the best ways to utilize getElementById in React?

javascript resize canvas to fit content

Retrieving multiple checkbox values using JavaScript

When I attempt to conceal the filter within mat-table using *ngIf, I encounter an issue where I am unable to read the property 'value' due to it being

Having trouble generating a readable output bundle due to the following error message: "The entry module cannot be found: Error: Unable to resolve './src/index.js'"

Querying val results in an empty string being returned

Angular 2: Obtaining the caret position in a contenteditable 'div'

Start Vue.js development server with SSL enabled (for secure HTTPS serving)

Import JSON Data into Angular-nvD3 Chart (AngularJS)

The dropdown feature stores and displays only the initial value

How can I incorporate a spinning cog from Font Awesome into a jQuery click event?

Obtain a PDF file from a Java web service through streaming with a POST request

Issue with submitting input fields that were dynamically added using jquery

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Utilizing Ajax to Invoke Wordpress Functions from a Client's Browser

Event listener in JavaScript for Bootstrap 5 modal

Difficulty in extracting data from child elements of JSON documents