前回の記事 【WordPress】JavaScriptを自作して読み込みたい！ファイルの追加方法も記載 を編集していて思ったのですが、WordPressはJSの操作をする際には基本的にJQueryで操作されるようです。
本日はJQueryで「指定されたclass」を監視してイベントハンドラを発火させる手順についてまとめました。
手順
１．操作したいタグにclassを指定
２．jsファイルにJQueryの記述を追加
３．動作確認 以下詳細です。
JQueryでclassを監視してイベントハンドラを発火させる
１．操作したいタグにclassを指定
とりあえずボタンをhtml内に作成します。
class属性は“btn“として作成します。
（”btn”部分の名前はなんでもいいです）
２．jsファイルにJQueryの記述を追加
WordPressにjsファイルを追加（先日の記事です。
よろしければご参照ください）と同じ手順でjsファイルを開き、JQueryを追記します。
大体上記のようにします。
３．動作確認
以下のボタンがアラートを表示すれば成功です。
以上です。
以下、Webアプリケーション内で無駄に長くなるhtmlのコストについてと、処理を統一させる必要性についての個人的な話です。
プログラムをシンプルに記述する必要性
１．「onclick」と記述して無駄に長くしたくない
よくあるフルスクラッチのWebアプリケーションでは、
<input type=”button” id=”hoge” name=”hoge” class=”hoge” onclick=”javascript:clickhoge();” onblur=”javascript:blrhoge();” onchange=”javascript:chghoge();“>
とかもにょもにょ書いてあって「グヘェ…」となりますが、そんなのいちいち書くぐらいだったら処理が同様のものはまとめて一括管理した方がいいです。
その後の保守は大体、機能追加で同じデザインのものがコピペされますが、onblurを削除し忘れたり、必要な処理が「onblurあるから作業完了してるね」と勘違いして後々問題になることが多いですね。
機能追加作業は、記述が無いものは間違いだと認識できますが既存の記述が間違いだと認識するのは多くのコストを必要とします。
２．編集する環境に合わせて仕様は統一したい（保守運用の観点より、余計なノイズは排除したい）
もしもこれがイベントハンドラをidで監視する方式とonclickその他で発火させる方式の2つが両立していたら 「あれ？ここだけ動かないんだけど？（不具合）」「なぜか2回アラート表示されるのだけれど？（不具合）」 と無駄なコストがかかること請け合いです。
可能な限りシンプルに。
編集するファイルにコメントアウトでレギュレーションを記述しておいたほうが後々の運用で楽です。
この部分は割と引継ぎの際に口頭で「ここのファイルはこういうルールだから」「ここの仕様は～」と伝えられますが、小学生の時に行った「伝言ゲーム」を思い出していただければ、口頭伝達の危険性がどれほどであるかはおわかりいただけると思います。
というか伝える時間をチープなものでもいいからマニュアル作成に回そう。
コメントを残す