1

JS コードを記述するためにモジュラー パターンを使用しています。すべての dom 要素への参照を持つオブジェクトがあります。コード実行の後の時点で追加する div のセレクターを配置しました。その div を追加し、参照オブジェクトに保存した参照を使用して jQuery.css を使用すると、機能しません。

NameSpace = {
    objects: {
        someButton: $('.someButton'),
        someDiv: $('.someDiv'),
        myDiv: $('.myDiv'), //This will be added later
        //Other references
        .
        .
    },

    bindHandlers: {
        NameSpace.objects.someButton.on('click', someEventHandler);
        //Other bindings
        .
        .
    },

    eventHandlers: {
        someEventHandler: function(e){
            var div = jQuery('<div class="myDiv"></div>');
            NameSpace.objects.someDiv.append(div);

            //Doesn't work! If I use jQuery('.myDiv'), then it works,
            //but kills my modular style
            NameSpace.objects.myDiv.css({ //some styles });
        },
        //Other event handlers
    }
}
//Other code

このアプローチは、ページに存在するオブジェクトに対してはうまく機能しますが、上記のように追加した div に対しては機能しません。

何か助けはありますか？

4

1 に答える 1

3

Javascript は手続き型です。この行myDiv: $('.myDiv')は一度だけ計算され、呼び出すたびに計算されるわけではありません。

これは、セレクター$('.myDiv')がページの最初で満たされていることを意味します。

これを解決するには、変数を関数にする必要があります

objects: {
        someButton: $('.someButton'),
        someDiv: $('.someDiv'),
        myDiv: function(){ return $('.myDiv'); }, //This will be added later
        //Other references
        .
        .
    },

呼び出すたびにセレクターを再計算する必要があります。

トリックが機能するかどうか教えてください。

于 2013-01-17T08:37:10.690 に答える