クリック機能で開く必要があるページに非表示の div があります。
クリック可能なリンクはブートストラップ ポップオーバー内にあるため、ポップオーバー コンテンツ リンクをクリックしてページ div を開くにはどうすればよいですか。
ここにフィドルがあります
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
});
クリック機能で開く必要があるページに非表示の div があります。
クリック可能なリンクはブートストラップ ポップオーバー内にあるため、ポップオーバー コンテンツ リンクをクリックしてページ div を開くにはどうすればよいですか。
ここにフィドルがあります
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
});
このコードの代わりに:
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
});
これを試して
$("body").on("click","#open",function(e) {
e.preventDefault();
$('.open-this').slideToggle("slow");
});
更新されたフィドルをチェックしてくださいhttp://jsfiddle.net/bfkLM/15/
コードの問題は、リンクがコードから生成され、イベント ハンドラーがイベントをリンクしようとしているときに dom に表示されないclick
ことです。
したがって、解決策は委任されたイベントを使用することです:公式から; jquery ウェブサイト
委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合はドキュメントのコンテナー要素である可能性があります。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。
そのため、新しいコードが機能するのは、イベント ハンドラーをbody
タグにアタッチし、クリック イベントがターゲット要素 ( open
) から発生していることを確認するためです。これが発生すると、コードが起動され、ポップアップが表示されます。
もう1つ、の使用はe.preventDefault();
、ページがhref
アンカーのプロパティに移動しないようにすることです。