• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

jQueryでリサイズやクリックイベントを発火する方法

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

プロクラスの森です。
jQueryのイベント発行方法について、trigerがすごく便利だったのでメモです。

$(window).trigger(‘resize’)

JQueryで各要素をグリッド上に整列させるページを触っていた時、ページを表示したときにうまく整列されない…という状況になりました。
ブラウザをリサイズさせるとリサイズイベントが発火して無事整列するのですが、最初にページを開いたときの初期化がうまくいかずという状況でした。
JQueryのtrigerを使って、ページ読み込み時にリサイズを起こしてやることでひとまず解決しました。

$(document).ready(function() {
      $(window).trigger('resize')
    });

下記はリサイズ時にブラウザの横幅を取得するサンプルですが、読み込み時はtrigerイベントでresizeを起こして取得しています。

サンプル

$(“xxx”).trigger(‘click’);

クリックも起こせるので、ボタンクリックで動作するプラグインを読み込み時にも動かしたい時にも使えます。
プラグイン作者がハンドラを用意してくれていないタイミングでイベントを起こしたい時には便利。

$(document).ready(function() {
  $("#btn").trigger('click');
});

サンプル

サンプルでは読み込み時にURL末尾の#(ハッシュタグ)を取得して、ボタンクリックと同じイベントを、trigerイベントで起こしています。

#btn1
#btn2
#btn3

「該当する関数を呼び出せば同じこと」という指摘はもっともなのですが、頭の良い人達が作ったプラグインを使う時、プラグインのjsファイルの中の関数部分を探すのは結構大変だったりするので…
プラグインによっては、中を見ても全く分からん…とか、これっぽいけど引数の渡し方が高度すぎて呼び出せない…とかになります。(打ちのめされます)

余談ですが読み込み時の書き方でも詰まったのでメモ…

読み込み時のイベントの書き方

$(document).readyと$(window).on(“load”があるので、どちらを使うかでよく迷います。
どちらでもいけるケースも多いですが、実行タイミングに差があるので、詰まったらチェックすると良いかも。
下記サイトが詳しいです。 https://qiita.com/katsunory/items/3ba4683629333b94b2be

jQueryのverによる違い

$(window).load(function(){

を使う場合は、jQuery3.0以降は書き方が↓に変わっているので注意。

$(window).on("load",function(){

下記のサイトが詳しいです。
https://wemo.tech/109
https://9-bb.com/jquery-7/

詰まったら、JQueryのverもチェックすると良いかもです。

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
受講者満足度95%以上の人気講座!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら