プラグインで作成されたオールの表示/非表示

Question

私はsoundcloudプラグインを使用していますが、デフォルトではトラックリストが表示されます。私がする必要があるのは、ボタンを使ってそのリストの可視性を切り替えて、.jsコードを編集し、トラックリストの隣にクラス "tplaylist"というボタンを追加することです。何らかの理由で私はリストを隠すことができず、再びそれを見えるようにしない。 CSSで私は表示を設定することができます：なし;それは消えるが、私は再びそれを見ることはできない。私のコード：

$(".sc-player ol.sc-trackslist").css('display', 'none'); 
$(".sc-player ol.sc-trackslist").css('display', 'block'); 

$(".tplaylist").click(function(){ 
    $(".sc-player ol.sc-trackslist").toggle(); 
}); 

このコードは何らかの理由でトラックリストに影響を与えません。スタイルシート表示から削除した場合：なし。リストは可視であり、ここでJQueryに書かれているものはそれをまったく隠すわけではありません。私も純粋なCSSソリューションを試して、それも動作しません。

ありがとうございました！

Answer 1

これらの要素はコードの後に​​作成されるため、イベントは要素に関連付けられませんでした。プラグインのコードが書かれた場所を後に

1. 書き込みあなたのコードを：

   は、2つのオプションがあります。

2. onまたはdelegateのような委任イベントを使用します。

---

on

バージョン：

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

$('#container').on('click', '.tplaylist',function(){ 
    $('.sc-player ol.sc-trackslist').toggle(); 
}); 

on

有用docs：

イベントハンドラのみ、現在選択された要素に結合されています。あなたのコードが.on（）を呼び出すときに がページに存在している必要があります。 要素が存在し、選択できるようにするには、ページ上の HTMLマークアップ内にある要素のドキュメント対応ハンドラ内でイベント バインディングを実行します。新しいHTMLがページに挿入されている場合、 は、新しいHTMLが になった後で要素を選択し、イベントハンドラをアタッチします。または、委任されたイベントを使用して、次のようにイベント ハンドラを添付します。

委任イベントは、後でドキュメントに追加される 子孫のイベントを処理できるという利点があります。 委任イベントハンドラが添付された時点で存在することが保証されている要素を選ぶ することで、頻繁に接続し、イベントハンドラを削除する必要がなくなり にイベントを委任使用することができます。この 要素は、 ハンドラがドキュメント内のすべてのバブリングイベントを監視したい場合は、 モデルビューコントローラの設計、またはドキュメントのビューのコンテナ要素です。文書要素の は、他のHTMLをロードする前に文書の先頭にありますので、文書を準備するのを待つことなく、 を待たずにそこにイベントを添付することは安全です。

Answer 2

使用delegate可能性の高い理由は、プラグインがあり、その場で要素を作成するので、それをクリックイベントハンドラは文句を言わないことにバインドDOMの後半に挿入されているので、あなたが使用することができます

$(document).delegate("click",".tplaylist",function(){ 
$(".sc-player ol.sc-trackslist").toggle(); 
}); 

documentまたは階層内の上位要素へのイベント委任。

Answer 3

あなたはこれを難しくしています。ただ、トグルを使用する：jQueryのはあなたのためにこれを行うために、：そして「ブロック表示」：

$('.tplaylist').click(function() { 
    $('.sc-player ol.sc-trackslist').toggle(); 
}); 

あなたが「なし表示」を必要としません。