2

私はクラスを非表示/表示するために標準のメソッドを使用しています。

$('.myClass').show();  // or .hide() or .toggle()

ただし、myClassが非表示でクラスの新しい要素が作成された場合、は.hide()影響を受けなかったため、表示されます。これを回避するために、作成時にクラスが非表示になっている場合は、新しく作成された要素を非表示にします。

ただし、後で作成される要素に自動的に適用されるようにクラスを非表示にする方法はありますか？

$('#container').on('click', '.myClass', function () {...後で作成する要素にハンドラーをアタッチするパターンについて考えています。基本的に、これをdisplayプロパティでエミュレートしたいと思います。

4

4 に答える 4

1

.myClassdisplay:noneCSSに含める必要があります。その後、.show()必要なときにいつでも電話してください。

例： http： //jsfiddle.net/imsky/5J5Tt/

于 2012-08-05T02:01:40.827 に答える
1

DOMNodeInserted実際、これは、ほとんどの新しいブラウザーで要素がDOMに挿入されるたびに発生するイベントへのバインドの例です。

$(document).on('DOMNodeInserted', function(e) {//whenever an element is inserted
    if ($(e.target).is('.myClass')) {          //check if it has the right class
        $(e.target).hide();                    //and hide it if it does
    }
});

サポートがないため、IEでは機能しません。いくつかの回避策を見たことを覚えているようです。したがって、クロスブラウザにすることはおそらく可能です。

これが簡単なデモンストレーションです

于 2012-08-05T02:01:51.963 に答える
1

私はあなたの最善の策は#container、次のようなクラスをに追加することかもしれないと思っています：

#container .myClass {

  display: none;

}


#container.with-whatevers .myClass {

  display: block;

}


$( '#container' ).on( 'click', '.myClass', function () {

  $( "#container" ).toggleClass( "with-whatevers" );

} );

要素の表示を切り替えるためのメカニズムが正確にわからない.myClass-明らかに、要素が非表示になっている場合は、要素をクリックして表示を切り替えることはできません。

私は次のパターンを考えています：$（'＃container'）。on（'click'、'.myClass'、function（）{...後で作成される要素にハンドラーをアタッチします。

これは、後で作成される要素にハンドラーを実際にアタッチするわけではありません。に付け#containerます。次に、その子孫のクリックイベントがバブルアップし、ターゲット要素がに渡されたセレクターと一致する場合on()、ハンドラーが実行されます。

于 2012-08-05T02:05:52.063 に答える
0

クリックイベントを追加する前に非表示にする

$('.myClass').hide();

次に、jQueryの.on（）または.delegate（）メソッドを使用します

$('#container').on('click', '.myClass', function(){
  $(this).toggle();
}
于 2012-08-05T01:58:30.723 に答える