jquery - jqueryを介してアンカークリックをシミュレートするにはどうすればよいですか？

Question

jQueryを介してアンカークリックを偽造することに問題があります：入力ボタンを最初にクリックしたときにシックボックスが表示されるのに、2回目または3回目は表示されないのはなぜですか？

これが私のコードです：

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

リンクを直接クリックすると常に機能しますが、入力ボタンを使用してシックボックスをアクティブにしようとすると機能しません。これはFFです。Chromeの場合は毎回動作するようです。ヒントはありますか？

score 200 · Accepted Answer

200

私のために働いたのは：

$('a.mylink')[0].click()

于 2012-05-11T23:13:34.340 に答える

score 124 · Accepted Answer

そのようなjQuery呼び出しをインライン化しないようにしてください。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がカスタムjQueryUIウィジェットであることに気付いたので、ここで手順を見つけました。

指示：

リンク要素を作成する（<a href>）
リンクにthickbox（class="thickbox"）の値を持つクラス属性を指定します
リンクのhref属性に次のアンカーを追加します。#TB_inline
追加後のhref属性で#TB_inline、次のクエリ文字列をアンカーに追加します。

？height = 300＆width = 300＆inlineId = myOnPageContent
それに応じて、クエリのheight、width、およびinlineIdの値を変更します（inlineIDは、ThickBoxに表示するコンテンツを含む要素のID値です。
オプションで、クエリ文字列（eg）にmodal = trueを追加して、ThickBoxを閉じるには、ThickBox内から関数を#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true呼び出す必要があります。tb_remove()非表示のモーダルコンテンツの例を参照してください。ThickBoxを閉じるには、[はい]または[いいえ]をクリックする必要があります。

score 19 · Accepted Answer

最近、jQueryを介してマウスクリックイベントをトリガーする方法を見つけました。

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

score 9 · Accepted Answer

このアプローチは、Firefox、Chrome、およびIEで機能します。それが誰かを助けることを願っています：

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}

score 8 · Accepted Answer

これは非常に古い質問ですが、このタスクを処理するのが簡単なものを見つけました。これは、simulateと呼ばれるjqueryUIチームによって開発されたjqueryプラグインです。jqueryの後に含めることができ、次のようなことができます

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

Chrome、Firefox、Opera、IE10で正常に動作します。https：//github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.jsからダウンロードできます。

score 6 · Accepted Answer

質問のタイトルには、「jQueryでアンカークリックをシミュレートするにはどうすればよいですか？」と書かれています。次のように、「trigger」または「triggerHandler」メソッドを使用できます。

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

この実際のスクリプトはテストされていませんが、私はtrigger以前にet alを使用したことがあり、それらは正しく機能しました。

UPDATE
triggerHandlerは、OPが望んでいることを実際には実行しません。私は 1421968がこの質問に対する最良の答えを提供すると思います。

score 5 · Accepted Answer

Selenium APIを調べて、ブラウザー互換の方法で要素のクリックをトリガーする方法を確認することをお勧めします。

selenium-browserbot.js

関数を探しBrowserBot.prototype.triggerMouseEventます。

score 4 · Accepted Answer

私はあなたが使うことができると信じています：

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

これにより、実際にクリックしなくても、クリック機能が簡単にトリガーされます。

score 2 · Accepted Answer

アンカークリックを偽造する必要がありますか？シックボックスサイトから：

ThickBoxは、リンク要素、入力要素（通常はボタン）、および領域要素（画像マップ）から呼び出すことができます。

それが許容できる場合は、入力自体にthickboxクラスを配置するのと同じくらい簡単なはずです。

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

そうでない場合は、Firebugを使用し、アンカー要素のonclickメソッドにブレークポイントを設定して、最初のクリックでのみトリガーされるかどうかを確認することをお勧めします。

編集：

さて、私は自分でそれを試してみる必要がありました、そして私にとってあなたのコードはChromeとFirefoxの両方でほぼ正確に機能しました：

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

入力またはアンカー要素のどちらをクリックしても、ウィンドウがポップアップします。上記のコードが機能する場合は、エラーが他の場所にあり、問題を特定することをお勧めします。

もう1つは、異なるバージョンのjquery/thickboxを使用していることです。私はthickboxページから取得したもの（jquery1.3.2とthickbox3.1）を使用しています。

score 2 · Accepted Answer

jQueryを介して、またはリンクhrefを模倣するアクションを含むHTMLページコードでフォームを作成できます。

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

score 2 · Accepted Answer

ページにアクセスする際のアンカーのクリックをシミュレートするために、jQueryを使用してscrollTopプロパティをアニメーション化し$(document).ready.ました。複雑なトリガーは必要ありません。これはIE6やその他すべてのブラウザーで機能します。

score 2 · Accepted Answer

私が使用していないので、JQueryを使用する必要がない場合。のクロスブラウザ機能に問題がありました.click()。だから私は使用します：

eval(document.getElementById('someid').href)

score 2 · Accepted Answer

Javascriptではこのようにすることができます

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

そしてあなたはそれを次のように使うことができます

submitRequest("target-element-id");

score 1 · Accepted Answer

Jureのスクリプトを使用してこれを作成し、必要な数の要素を簡単に「クリック」しました。
1600以上のアイテムでGoogleリーダーを使用したところ、（Firefoxで）完全に機能しました。

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

score 1 · Accepted Answer

JQuery('#left').triggerHandler('click');FirefoxとIE7で正常に動作します。他のブラウザではテストしていません。

自動ユーザークリックをトリガーする場合は、次の手順を実行します。

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

score 1 · Accepted Answer

これは、「非表示の入力（ファイル）要素」をクリックするAndroidネイティブブラウザでは機能しません。

$('a#swaswararedirectlink')[0].click();

しかし、これは機能します：

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

score 0 · Accepted Answer

jQuery UIスピナーを使用して単体テストで「クリック」をシミュレートしようとすると、以前の回答のいずれも機能しませんでした。特に、下矢印を選択する「スピン」をシミュレートしようとしていました。jQuery UIスピナーユニットテストを調べたところ、次のメソッドが使用されていました。

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();

jquery - jqueryを介してアンカークリックをシミュレートするにはどうすればよいですか？

17 に答える 17

指示：

Related

Reference