javascript - クラスがHTML要素にいつ変更/追加されたかを知る方法は?

Question

次のようなリストがあります。

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