0

動的に作成された div に jquery を使用して css プロパティを追加しようとしています。ドキュメントの読み込み時に jquery css 部分を指定します。しかし、後で任意のイベントを使用して div を動的に追加すると、クラス名を持つ div は指定されたプロパティを取得しません。サンプルコードをフィドルに追加しました.. http://jsfiddle.net/nEgzY/9/

フィドルでは、ボタンのクリック時にdivが追加されますが、指定されたプロパティを取得していないことがわかります..

var eventsArray=["test1", "test2"];

 $(".testClick").on("click",function(){
   var printHTML='';
    for(var i=0; i<eventsArray.length; i++){
        printHTML = "<div class='eventNameTagColor"+eventsArray[i] +"'> test </div>"
   }

  $(".appendingDiv").append(printHTML);

});


    $(document).ready(
    function() {
    for(var i=0; i<eventsArray.length; i++){
        $(".eventNameTagColor"+ eventsArray[i]).css({"background" : "linear-gradient(center top , #F68A28, #F36C00) repeat scroll 0 0 transparent" ,
    "width": "250px",
    "font-weight" : "bold",
    "height" : "30px",
    "color":"#ffffff",
     "float":"left"                                    
    });
}
});
4

4 に答える 4

0

これが動作デモです。

コードには 3 つの問題があります。

1) ここでセミコロンを逃したprintHTML = "<div class='eventNameTagColor"+eventsArray[i] +"'> test </div>"

2） DOMが生成されている間に$(".eventNameTagColor"+ eventsArray[i])cssを適用しました$(document).ready$(".testClick").on("click",function(){ });

3) CSS3 グラデーションはあまり得意ではありませんが、グラデーションの CSS が正しくないように思われます。background : linear-gradient(center top , #F68A28, #F36C00) repeat scroll 0 0 transparent;

于 2013-05-14T11:11:13.713 に答える
0

私はあなたがこれについてあなた自身の質問に答えたと思います: あなたが指定している CSS スタイルは Document Ready でのみ起動されるため、その時点でセレクターに一致する DOM に表示される要素のみがスタイルを受け取ります.

jQuery 経由で CSS を追加すると、対象の要素にインライン スタイルとして直接追加されます。後で新しい要素をページに追加する場合、JS を介して (再度) 明確にスタイルを設定しない限り (つまり、printHTML 変数に追加する)、それらの要素は含まれません。

于 2013-05-14T10:40:11.743 に答える
0

問題はコードにあります。こちらをご覧ください: http://jsfiddle.net/nEgzY/10/

私が追加したことがわかります：

<div class="eventNameTagColortest1"></div>

CSS を変更する要素を元のページに配置すると、CSS が適切に適用されることがわかります。問題は、(ドキュメントの読み込み時に) CSS を変更したいときに要素が存在しないことです。これは、クリック イベントで行う必要があります。

于 2013-05-14T10:38:54.480 に答える