【jQuery】trigger()で強制的に要素のイベントを発生させる

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryのtrigger()メソッドで要素のイベントを強制的に発生させる方法をご紹介しています。

trigger()メソッドは、スクリプト側から要素のイベントを発生させる際にとても役立つメソッドです。この後にあの要素のイベントを発生させたいな、という状況になった場合に活用していただければと思います。

では、解説していきます。

trigger()とは

trigger()は、セレクタの要素に指定したイベントを発生させるjQueryのメソッドです。

ある要素をクリックしたときに発生するイベントを、実際にクリックすることなくスクリプト側から発生させたい、というときに有効です。

trigger()の使い方

使い方は他のメソッドと同様です。セレクタにtrigger()を指定し、引数にイベントを指定します。

$(selector).trigger('event');

イベントには、on()などで指定するイベント、例えばclickやchangeを指定することができます。

また、trigger()は引数に配列を指定してイベントに値を渡すことができます。

$(selector).trigger('event', [value1, value2...]);

trigger()でイベントを発生させてみる

trigger()を使用して要素のイベントを発生させてみます。

2つのボタン要素を用意し、それぞれにクリックイベントを設定します。「Button2」がクリックされたときに「Button1」のクリックイベントを発生させます。

HTML

<div id="app">
    <button type="button" class="btn1">Button1</button>
    <button type="button" class="btn2">Button2</button>
</div>

JS

$('.btn1').on('click', function(){
   alert('Button1がクリックされました！'); 
});

$('.btn2').on('click', function(){
    $('.btn1').trigger('click');
});

下記はデモになります。「Button2」をクリックして挙動を確認してみてください。

DEMO

See the Pen
trigger() | jQuery by ryohei (@intotheprogram)
on CodePen.

最後に

trigger()はスクリプトから強制的に要素のイベントを発生させることができる便利なメソッドです。複数のイベントが設置されたページで「これがクリックされたときにあれを実行したい！」を解消してくれますので、ぜひ使ってみてくださいね。

以上、jQueryのtrigger()で強制的に要素のイベントを発生させる方法のご紹介でした！