jQueryを使用してリンクのクリックをトリガーする方法

238

リンクがあります：

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

そして私はそれをトリガーすることを試みています：

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

しかし、それは機能しません。

私も試しました： $('#titleee a').trigger('click');

編集：

ここで呼ばれるものは何でもトリガーする必要があります <a href="#inline" rel="prettyPhoto">

jquery  triggers  click 
— 愛国的な牛
ソース
7
location.href($('#titleee').find('a').attr("href"));？
— シルヴァン
3
または$（ 'ul.gallery'）。find（ 'li> a'）。trigger（ 'click'）;
— CarneyCode、2011
114
みんな。本当の答えはとても簡単です。$('#titleee a')[0].click();。つまり、jQueryではなく、DOMクリックメソッドを使用します。Graham Hotchkissに賛成票を投じてください！
— ローマスターコフ2014
5
@romkynsは、新しいタブではなくポップアップを開くので、正しくありません。しかし、この「a」タグ内のダミースパンをクリックすると目的が達成されます
— Shishir Arora '19
1
アンカーでイベントをトリガーしようとしている場合は、使用しているコードが機能します。$('ul#titleee li a[href="#inline"]').click();
— Anand Pal

回答:

306

アンカーでイベントをトリガーしようとしている場合、使用しているコードは動作します。jsHandlerで例を再作成し、eventHandlerを追加して、動作することを確認できます。

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

アンカーをクリックしてユーザーにWebページ上の特定のポイントに移動させようとしているのですか、それともバインドされているイベントをトリガーしようとしているのですか？たぶん、実際にはクリックイベントをイベントに正常にバインドしていませんか？

これも：

$('#titleee').find('a').trigger('click');

これと同等です：

$('#titleee a').trigger('click');

findを呼び出す必要はありません。:)

— キット・サンデ
ソース
16
@Kit .find（）は、提案しているものよりも高速なセレクタです。同意しない場合でもベンチマークを行ってください。ただし、提案によって速度が低下します。積極的に:-)
— Ady Ngom 2011
14
@mashappslabs-大丈夫です。それがどれほど真実であっても、時期尚早でミクロな最適化を行う必要性を感じたなら、私はあなたのために幸せです。:)
— キットSunde
5
@Kit ...したがって、「findを呼び出す必要がない」などのステートメントを作成している場合、それは時期尚早の最適化の領域に該当しませんか？私はそう思うが、それは最初に提案されたものよりもたまたま遅いだけだ。私は議論のために返答するのではなく、私たち全員が好きなことでより良くなるための協調した努力のためにです。これが正しく表示されることを願っています:-)
— Ady Ngom '27
5
@mashappslabs-jsperf.comを初めて見たので、戻ってきて正解だと思ったので、一般的な方法の方が高速です。Operaのみが低速です。jsperf.com/jquery-selector-perf-right-to-left/32
— Kit Sunde
9
奇妙なことに、上記ではうまくいきませんが、@ GrahamHotchkissの答えはうまくいきます。
— オリバー
210

申し訳ありませんが、イベントハンドラーは本当に必要ありません。必要なのは、クリックするタグ内の別の要素です。

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

jquery：

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

これはあなたがクリックしているものに関するすべてであり、それはタグではなくその中のものです。残念ながら、裸のテキストはJQueryによって認識されないようですが、それはバニラJavaScriptによって認識されます。

document.getElementById('test1').click(); // Works!

または、jQueryオブジェクトに配列としてアクセスする

$('#test1')[0].click(); // Works too!!!
— グラハム・ホッチキス
ソース
9
$（ 'selector'）[0] .click（）は、イベントハンドラーをトリガーしない少なくとも1つのケースを実際に処理します。プロトコルハンドラーリンクをトリガーする実際のクリックとしてブラウザーに認識させます。クリックイベントでトリガーを呼び出しても、関連付けられたアプリケーションは起動しません。回答に含めていただきありがとうございます。
— Greg Pettit、2014
3
うん、.click()まさに私が必要なものです！
— notacouch 2014年
3
$（ '＃test2 span'）。trigger（ 'click'）; 新しいタブでURLを開くことができるので助けましたが、$（ '＃test1'）[0] .click（）; ポップアップinsteaを開いていました。
— Shishir Arora、2015
背景要素のクリックを処理しようとすると：$（ '＃titleee a'）。trigger（ 'click'）; ->動作しません！$（ '＃titleee a'）[0] .click（）; ->動作します！
— 8
1
$（ '＃test1'）[0] .click（）; 救世主です。
— どうも
18

この質問は、「<a>要素のクリックをトリガーする」ことでGoogleで1位にランク付けされており、実際にその方法について言及している回答はないため、次のようになります。

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

説明：jQuery-objectclickではなく、基礎となるhtml-elementでをトリガーします。

どうぞよろしくお願いいたします。

— アレックス
ソース
2
「jQueryオブジェクトではなく、基になるhtml要素のクリックをトリガーします。」-これは私のためにクリックしました、ありがとう！
— フリッシュ
5

あなたが提供したコードでは、何が起こることも期待できません。@mashappslabsの2番目：最初にイベントハンドラーを追加：

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

次に、イベントをトリガーします。

$("selector").click(); //or
$("selector").trigger("click");

コンソールにメッセージが表示されます。

— ジュルツ
ソース
5
これは私にとっては機能しません。セレクタが "a"（明確にするためにリンクのHTMLタグ）の場合、を呼び出すと匿名関数が呼び出されますtriggerが、タグのアクションは実行されません。これは、イベントが関連するDOM要素に伝達されないようなものです。@GrahamHotchkissの答えは、私にとって確実に機能する唯一のものです。
— オリバー
5

アンカーでイベントをトリガーしようとしている場合は、使用しているコードが機能します。

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

または

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

または

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});
— アナンドパル
ソース
3

最初にクリックイベントを設定してから、それをトリガーして何が起こるかを確認できます。

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');
— アディンゴム
ソース
3

これはイベントをトリガーする方法のデモです

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>
— ハルシャドヒラパラ
ソース
3

リンクの場合、これは機能するはずです。

eval($(selector).attr('href'));
— にいる
ソース
2

これはあなたの質問に正確に答えるものではありませんが、同じ結果をより少ない頭痛で得るでしょう。

私は常に、実行したいすべてのロジックを含むクリックイベント呼び出しメソッドを持っています。実際のクリックなしでアクションを実行したい場合は、メソッドを直接呼び出すだけで済みます。

— マシュー・ヴァインズ
ソース
2

要素のネイティブ.click()メソッドを呼び出すか、createEventAPIを使用する必要があります。

詳細については、https：//learn.jquery.com/events/triggering-event-handlers/をご覧ください。

— ジョージ・フィリパキス
ソース
6
Stack Overflowへようこそ！これは問題を解決するための貴重なヒントになるかもしれませんが、良い答えも解決策を示しています。意味を示すサンプルコードを提供するように編集してください。または、これをコメントとして書くことを検討してください。
— Toby Speight 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.