[解決済み] jqueryでアンカークリックをシミュレートするにはどうしたらいいですか?
質問
jQueryでアンカーをクリックしたように見せかけることに問題があります。 入力ボタンを初めてクリックすると thickbox が表示されますが、2 回目、3 回目には表示されないのはなぜですか?
以下は私のコードです。
<input onclick="$('#thickboxId').click();" type="button" value="Click me" />
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
リンクを直接クリックした場合は常に動作しますが、入力ボタンからthickboxを有効にしようとすると動作しません。これはFFでの話です。Chromeの場合は毎回動作しているようです。何かヒントがありますか?
解決方法は?
jQueryの呼び出しをインライン化するようなことはしないようにしましょう。ページの一番上にscriptタグを置いて、バインドするようにします。
click
イベントを発生させます。
<script type="text/javascript">
$(function(){
$('#thickboxButton').click(function(){
$('#thickboxId').click();
});
});
</script>
<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
編集する
もし、ユーザーが物理的にリンクをクリックすることをシミュレートしようとしているのであれば、それは不可能だと思います。回避策としては、ボタンの
click
イベントを使用して
window.location
をJavascriptで実行します。
<script type="text/javascript">
$(function(){
$('#thickboxButton').click(function(){
window.location = $('#thickboxId').attr('href');
});
});
</script>
2を編集します。
ThickboxがカスタムjQuery UIウィジェットであることを理解した今、私は手順を見つけました。 ここで :
説明書
-
link 要素を作成する (
<a href>
) -
リンクにclass属性を与え、値をthickboxとする(
class="thickbox"
) -
で
href
属性に以下のアンカーを追加してください。#TB_inline
-
での
href
属性の後に#TB_inline
アンカーに以下のクエリ文字列を追加します。?height=300&width=300&inlineId=myOnPageContent
-
クエリの height、width、inlineId の値を適宜変更します(inlineID は ThickBox で表示したいコンテンツが含まれる要素の ID 値です)。
-
オプションとして、クエリ文字列に modal=true を追加できます (例.
#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true
を呼び出す必要があります。tb_remove()
関数を使用します。隠しモード コンテンツの例では、厚いボックスを閉じるには「はい」または「いいえ」をクリックする必要があります。
関連
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] .animateをループさせる方法 JQuery
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み] jQueryで名前を指定して要素を選択するには?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Ajaxクロスオリジンリクエストがブロックされました。同一生成元ポリシーがリモートリソースの読み取りを不許可にする
-
[解決済み] JQueryの使用 - フォームが送信されないようにする
-
[解決済み] jQueryで文字色を変更するにはどうすればよいですか?
-
[解決済み] AJAXを同期させる(SJAX)にはどうすればよいか
-
[解決済み] Bootstrapのcollapseが機能しない。ハンバーガーメニューが表示されない。
-
[解決済み] JQuery Fancyboxが動作しない
-
[解決済み] jQuery .validate() submitHandler が起動しない
-
[解決済み] 3桁ごとの数字にカンマを追加
-
[解決済み] jquery form が期待通りに動作しない。ajaxForm が関数でない。
-
[解決済み] jQueryの再帰性が高すぎる