1. ホーム
  2. jquery

[解決済み] jqueryでアンカークリックをシミュレートするにはどうしたらいいですか?

2022-02-16 12:40:54

質問

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() 関数を使用します。隠しモード コンテンツの例では、厚いボックスを閉じるには「はい」または「いいえ」をクリックする必要があります。