检测事件，当类添加到李

有HTML列表作为，检测事件，当类添加到李

<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>

我加入选择类的任何li元素的。这里我已经添加class =“selected”到第四个li元素。

要执行一些代码时类选择被添加到任何li元素的。

尝试过这一项，但未按预期工作。

<script> 
    $(function() { 
     $('#slider').bind('DOMSubtreeModified', function(e) { 
      alert("Changed"); 
     }); 
    }); 
</script>

来源

2014-01-13 fledgling

当您添加类，调用特定的功能...使用任何其他方式将只是实践坏的[jQuery的 –

可能重复 - 消防事件如果CSS类更改]（http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed） – undefined

处理此问题的最佳方法是在添加类时调用您的函数，因为它是您的代码添加它。

有两种常见的方式做到这一点：

你可以做到这一点与直接调用：

li.addClass("selected"); 
doSomethingBecauseItChanged(li);

或者您也可以通过在li提高自己的事件做其他代码可以监听的元素，这些代码更加彻底地将代码添加到应答变化的代码中。

这里的监听代码事件：

$("#slider").on("added-class", function() { 
    alert("Changed"); 
});

而这里的代码添加类和引发事件：

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

注意added-class是我编了一个名字，不是已经存在。使用任何你喜欢的名字，只要确保不与现有的事件类型冲突。

下面是一个完整的示例：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>

另外，如果你并不需要IE浏览器的支持，您可以使用mutation observer（support matrix），但坦率地说，你真的不应该，如果你控制那就是把该代码需要使用这些类。

来源

2014-01-13 10:57:16

在点击事件中添加类后，只需调用一个函数。

$(function() { 

    function doSomething() { 
     ..... 
    } 

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

来源

2014-01-13 10:56:51 dcodesmith

注册处理程序时，您要添加的class.Something这样

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

来源

2014-01-13 10:58:04

检测事件，当类添加到李

回答

相关问题