Question

184

Detect event when class is added to li

rated 0 times [ 188] [ 4] / answers: 1 / hits: 7727 / 11 Years ago, mon, january 13, 2014, 12:00:00

Having html list as ,

<ul id=slider>

    <li class=></li>

    <li class=></li>

    <li class=></li>

    <li class=selected></li>

    <li class=></li>

    <li class=></li>

    <li class=></li>

<ul>

I am adding selected class to any of the li element.
Here i have added class=selected to fourth li element.

Want to execute some code when class selected is added to any of the li element.

tried this one , but not working as expected.

<script>

    $(function() {

        $('#slider').bind('DOMSubtreeModified', function(e) {

            alert(Changed);

        });

    });

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseb

Add To Favorites

Follow

Total Points: 252

Total Questions: 96

Total Answers: 106

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

analiseb questions

1 Cypress Best Practice - Store and compare two values

Tue, Sep 28, 21, 00:00, 3 Years ago

1 Cannot set property '' of undefined angular

Tue, Oct 6, 20, 00:00, 4 Years ago

1 Refresh page on this.props.history.push with same url

Tue, Jun 30, 20, 00:00, 4 Years ago

1 VUE - data object is passed as a reference always or sometimes it is copied?

Fri, May 8, 20, 00:00, 4 Years ago

1 Can Javascript spread operator include undefined fields of an object?

Wed, Jan 16, 19, 00:00, 5 Years ago

View All

answered 11 Years ago frankiebobbyc · Accepted Answer

The best way to handle this is just to call your function when you add the class, since it's your code adding it.

There are two common ways to do that:

You might do that with a direct call:

li.addClass(selected);

doSomethingBecauseItChanged(li);

Or you can do it by raising your own event on the li element that other code can listen to, which more thoroughly decouples the code adding the class from the code responding to the change.

Here's the code listening for the event:

$(#slider).on(added-class, function() {

    alert(Changed);

});

And here's the code adding the class and raising the event:

li.addClass(selected).trigger(added-class);

Note that added-class is a name I made up, not something that already exists. Use whatever name you like, just make sure not to conflict with existing event types.

Here's a complete example: Live Copy | Live Source

<!DOCTYPE html>

<html>

<head>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>

<meta charset=utf-8 />

<title>Event Example</title>

  <style>

    li.selected {

      color: green;

    }

  </style>

</head>

<body>

<p>In two seconds, the third item will turn green and you'll see an alert.</p>

<ul id=slider>

    <li class=>xxxxx</li>

    <li class=>xxxxx</li>

    <li class=>xxxxx</li>

    <li class=>xxxxx</li>

    <li class=>xxxxx</li>

    <li class=>xxxxx</li>

    <li class=>xxxxx</li>

  </ul>

  <script>

    $(#slider).on(added-class, function() {

      alert(Changed);

    });

    setTimeout(function() {

      $(#slider li).eq(2).addClass(selected).trigger(added-class);

    }, 2000);

  </script>

</body>

</html>

Alternately, if you don't need IE support, you can use a mutation observer (support matrix), but frankly you really shouldn't need to use those if you control the code that's adding the class.