jQuery API の trigger( eventType ) は、１つ目の引数に指定したイベントを実行する。Ａ要素をクリックしても、Ｂ要素のクリックイベントを実行させたいときなどに便利だ。
記述方法
jQuery( セレクター１ ) . イベントタイプ１( function() {
jQuery( セレクター２ ) . trigger( イベントタイプ２ );
} );
jQuery( セレクター２ ) . trigger( イベントタイプ２ );
} );
「セレクター１」の要素の「イベントタイプ２」のイベント時に、「セレクター２」の要素の「イベントタイプ２」のイベントを実行。
実装例（サンプル）
実装例（サンプル）の動作について
青色、黄色、赤色それぞれのボックスをクリックすると、それぞれのボックスが、フェードアウト、フェードインする。
「トリガー」ボタンをクリックすると、青色、黄色、赤色全てのボックスが、フェードアウト、フェードインする。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-trigger' ) . click( function () {
jQuery( '#jquery-api-click-1, #jquery-api-click-2, #jquery-api-click-3' ) . trigger( 'click' );
} );
jQuery( '#jquery-api-click-1, #jquery-api-click-2, #jquery-api-click-3' ) . click( function () {
jQuery( this ) . fadeOut( 1000 ) . fadeIn( 1000 );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-trigger' ) . click( function () {
jQuery( '#jquery-api-click-1, #jquery-api-click-2, #jquery-api-click-3' ) . trigger( 'click' );
} );
jQuery( '#jquery-api-click-1, #jquery-api-click-2, #jquery-api-click-3' ) . click( function () {
jQuery( this ) . fadeOut( 1000 ) . fadeIn( 1000 );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-wrap {
width: 480px;
text-align: center;
}
#jquery-api-click-1, #jquery-api-click-2, #jquery-api-click-3 {
margin: 10px;
width: 138px;
height: 138px;
border: 1px solid gray;
border-radius: 10px;
float: left;
}
#jquery-api-click-1 {
background-color: blue;
}
#jquery-api-click-2 {
background-color: yellow;
}
#jquery-api-click-3 {
background-color: red;
}
-->
</style>
<!--
#jquery-api-wrap {
width: 480px;
text-align: center;
}
#jquery-api-click-1, #jquery-api-click-2, #jquery-api-click-3 {
margin: 10px;
width: 138px;
height: 138px;
border: 1px solid gray;
border-radius: 10px;
float: left;
}
#jquery-api-click-1 {
background-color: blue;
}
#jquery-api-click-2 {
background-color: yellow;
}
#jquery-api-click-3 {
background-color: red;
}
-->
</style>
HTML
<div id="jquery-api-wrap">
<p><button id="jquery-api-trigger">トリガー</button></p>
<div id="jquery-api-click-1"></div>
<div id="jquery-api-click-2"></div>
<div id="jquery-api-click-3"></div>
<div style="clear: left;"></div>
</div>
<p><button id="jquery-api-trigger">トリガー</button></p>
<div id="jquery-api-click-1"></div>
<div id="jquery-api-click-2"></div>
<div id="jquery-api-click-3"></div>
<div style="clear: left;"></div>
</div>