DOMが変更された後、クラスの変更が無視されるのはなぜですか？

Question

私は、相対的な位置付けを使用して、フィールドを移動するための価格グリッドを、ボックスの下に：overflow: hidden;としています。このフィールドには、価格を含む絶対配置ボックスがあります。このボックスをホバーすると、上と左の一致する値が色を変えます。これを実現するために、クラスはjQueryを使用して切り替えられます。これは、最初は動作します。

ただし、グリッドの移動後、クラスの変更はグリッドの上にあるブロックにはもう影響しません。 Chromeコンソールでは、クラスが追加されているのがわかりますが、CSSスタイルは適用されません。要素の他のスタイルは変更されていません。

要素に影響する他のスタイルルールがないことを100％確信していますが、DOMの変更後にクラスの変更に応答しなくなるだけです。

何とかDOMをリフレッシュできますか？

var str_element = "#"+weekday[Bdate.getDay()]+"-"+Bdate.getDate()+"-"+(Bdate.getMonth()-1); 
$(str_element).toggleClass("red"); 

：クラストグル

$("#price_dates_cells").append("<div id='"+weekday[theBeginDate.getDay()]+"-"+theBeginDate.getDate()+"-"+(theBeginDate.getMonth()-1)+"' class='datecell' style='left: "+(Math.floor(difference/(3600 * 24 * 1000)) * (cellwidth))+"px'>"+weekday[theBeginDate.getDay()]+"<br>"+theBeginDate.getDate()+" "+yearmonth[theBeginDate.getMonth()]+"</div>"); 

：

最初の場所にセルを追加：

私は、関連するコードを取得しようとしました：編集

とその原因と思われる動きoblem：

$('#price_grid').animate({"top": (((horizontalMovement) * cellheight)) }, 'fast', 'linear'); 

Class not Applied http://img708.imageshack.us/img708/6491/classnotapplied.png

Answer 1

ええ、私は今、とても愚かな気がします。追加された要素のID構造を変更して、それらが一意であることを確認しましたが、日付セルの二重追加を防止するためのチェックを変更するのを忘れました。要素はクラスを受け取り、スタイリングを適用しましたが、クラスを受け取っていない同一の要素でカバーされていました。

jQueryは、指定されたIDを持つ最初の要素にクラスを論理的に追加しただけです。最初に作成されたクラスは、複製の下に配置されるためです。

私は少し異なったスクリーンショットをクリップしていただけならば、私は、誰かが気づいているだろうと確信している：あなたの答えのためのD

みんなありがとうを！

Answer 2

CSS常にlast statementにpriorityを与えます。あなたがredオーバーライドしたくない場合は、あなたのケースで

しかし

が起こるのだ

.datecell{ 
    background-color:grey; 
} 
.red{ 
background-color:red 
} 

を：あなたは.datecellのdiv colorを上書きしたいのであれば、それはこのように書くred class afterを書きます.datecellこのように書く：

.red{ 
    background-color:red 
    } 
.datecell{ 
     background-color:grey; 
    }