如何知道類何時改變/添加到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元素？

回答

相關問題