Detect event when class is added to li

Question

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>

When you add class, call specific function... Using any other way would be just bad practice — A. Wolff, Jan 13 '14 at 10:54
possible duplicate of [jQuery - Fire event if CSS class changed](http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed) — Ram, Jan 13 '14 at 11:00

score 3 · Answer 1 · answered Jan 13 '14 at 10:56

3

Just invoke a function after you add the Class on the click event.

$(function() {

    function doSomething() {
      .....
    }

    $('ul').on('click', 'li' function(e) {
          $(this).addClass('selected');
          doSomething();
    });
});

answered Jan 13 '14 at 10:56

dcodesmith

9,590
4
36
40

T.J. Crowder · Accepted Answer · 2014-01-13T11:02:44.077

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.

score 1 · Answer 3 · answered Jan 13 '14 at 10:58

1

Register handler when you are adding the class.Something like this

$('li').addClass('selected').trigger('class-change');
$('#slider').bind('class-change', function() {
  //do something
 });
});

answered Jan 13 '14 at 10:58

Milind Anantwar

81,290
25
94
125

Detect event when class is added to li

3 Answers3