如何知道类何时改变/添加到HTML元素？

我有一个看起来像这样的列表：如何知道类何时改变/添加到HTML元素？

<ul id="colors"> 
<li class="variant on">red</li> 
<li class="variant off">blue</li> 
<li class="variant off">white</li> 
<li class="variant off">black</li> 
</ul>

我希望得到一个事件时，从关闭到阶级的变化，例如一个项目的变化如果出现以下情况：

<li class="variant off">red</li> 
<li class="variant on">blue</li>

对于我试图用的liveQuery但我不设法得到事件或将其设置正确。

$('#colors li.on').livequery(function(){ 
          console.log(this.text()) 
          });

来源

2013-05-05 Guy Korland

livequery不是jQuery的功能。 live（）不包含在jQuery 2.0.0中 – 2013-05-05 14:10:58

livequery是我发现的唯一插件声明可以做到这一点 – 2013-05-05 14:11:41

这是一个相当干净的方式来做到这一点：http://stackoverflow.com/questions/1950038/jquery-fire -event-if-css-class- – Joe 2013-05-05 14:12:33

这只能在支持MutationObserver对象的现代浏览器中使用。否则，您将无法直接观察DOM更改。你总是可以编写一些可以自动引发事件的拦截器，但我不会推荐它。你试图达到的是非常糟糕的设计。 您不应该依赖DOM来跟踪您的应用程序状态。

来源

2013-05-05 14:11:59 plalx

你有没有使用livequery插件？ – 2013-05-05 14:14:17

@GuyKorland，不，我从来没有做过，但我很快看了一眼，那不是它做的。基本上它和将第二个选择器传递给jQuery中的'on'函数一样。 – plalx 2013-05-05 14:23:48

我发现这个答案，这似乎提供了不支持MutationObserver的浏览器的解决方案http://stackoverflow.com/a/11004907/593425 – 2013-05-05 14:27:49

一个丑陋的做法是在运行jQuery的实现之前用你的一些中间函数修补jQuery函数。您可以在addClass和removeClass上运行中间代码。例如，修补addClass。我们把原来的addClass

jQuery.fn.addClass = (function(){ 
    var addClass = jQuery.fn.addClass; 
    return function(){ 
    //do stuff here before running the original addClass 
    //you could collect callbacks and run them here 
    return addClass.apply(this,arguments); 
    } 
}());

另一种方法是MutationObserver目前仅是Chrome，Firefox和Safari浏览器的支持。

来源

2013-05-05 14:12:35 Joseph

如何知道类何时改变/添加到HTML元素？

回答

相关问题