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>

Answer 1

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