【jQuery + Bootstrap】イベント発火時に要素を挿入【change・append・empty】

エンジニア|ポートフォリオ
新人

jQueryで要素を追加する方法ついて知りたいな。

でも、なんか難しそう。

今回の記事は上記のような方におすすめ。

今回の記事では、jQueryでプルダウンが変更された際、エラー要素を追加する方法について…jQuery初心者でもわかるよう、わかりやすく解説いたします!

jQueryとBootstrapの紐付けって難しそう、と苦手意識を持つ方にもおすすめの記事です!

なお、今回は「プルダウンが変更された時」に関しての説明ですが、例えば「ボタンにフォーカスされた時」や「ボタンが押された時」など、他のイベントにも応用できるかと思います!

エンジニア|ポートフォリオ
新人

気になる箇所あったらコメントで教えてね。

本記事の内容

なおこの記事は3分で読める内容です。

jQuery:イベントの種類

jQueryのイベントには以下の種類があります。「scroll」「change」など、よく使うのもをまとめました。

イベント説明
focus要素がフォーカスされた時に発火
loadドキュメント内の全リソースの読み込みが完了した時に発火
scrollドキュメントがスクロールされた時に発火
clickクリックされた時に発火
change要素がフォーカスされて値が変更された時
詳細はこちら、Qiita「jQuery on() イベントの種類」をご覧ください。

jQuery:HTML要素との紐付け

続いて、jQueryとHTML要素との紐付け方法です。例えば、以下のような「select」要素があったとします。

<label>西暦: </label>
<select class="form-control" name="name" id="name">
  <option selected="selected" value="2000">2000</option>
  <option value="2001">2001</option>
  <option value="2002">2002</option>
</select>年

この時点では、まだselectボックスの表示のみです。こんな感じ↓ですね!

セレクトボックスを追加

このままでは、jQuery側から操作できないので、紐付け用のclass名:triggerを設定します。

<!-- このままではjQueryで操作できないので、 -->
<select class="form-control" name="name" id="name">

<!-- ↓「trigger」classを設定する -->
<select class="form-control trigger" name="name" id="name">

あとは、jQuery側でclass名を指定して、処理を記述するだけです。ちなみに今回は、セレクトボックスが変更された時に、処理を実施したいので「change」を指定しています。

// 値が変更された時に検知したい場合
$(function () {
  $(".trigger").on("change", function () {
    // 処理を記述
 });
});

その他にも、フォーカスされた時など色々タイミングを指定できるので、ぜひこちらの記事、「jQuery on() イベントの種類」をご覧ください。フォーカスされたときは、こちら↓

// 要素がフォーカスされた時に検知したい場合
$(function () {
  $(".trigger").on("focus", function () {
    // 処理を記述
 });
});

jQuery:要素を追加する方法

通常のHTML要素を追加する方法と、Bootstrap要素を追加する方法についてご紹介します!

jQuery:HTML要素を追加する方法

まず、HTML内の要素を追加したい箇所にclass名をつけます。

<!-- HTML要素を作成する -->
<div class="alert-jquery"></div>

あとは、その箇所に「append」で追加したい要素を「`」で囲って、記述します。今回の場合は、「trigger」が変更された時に、div要素を追加してみます。また、非常に長いHTMLもベタ書き指定できるので、非常に使い勝手が良いです。

$(function () {
  $(".trigger").on("change", function () {

    // 要素を追加
    $(".alert-jquery").append(`<div>要素です</div>`);

 });
});

jQuery:Bootstrap要素を追加する方法

もちろん、Bootstrapの要素「ボタン」「アラート」なども追加することができます。

やり方は非常にカンタンで、追加したい要素を「`」で囲ってappendするだけです!通常のHTML要素追加の時とやり方は変わらないですよね。というか、もっと良いやり方はあるとは思いますが、調べたところ、ベタ書きが一番楽でした…💦

エンジニア|ポートフォリオ
新人

多分、もっと良いやり方あるんだろうけど、

ひとまずはコレで…泣

$(function () {
  $(".trigger").on("change", function () {

    // 要素を追加
    $(".alert-jquery").append(`<div class="alert fade in alert-danger">
      <button class="close" data-dismiss="alert">×</button>
      正しい値を選択してください。
    </div>`);

 });
});

ちなみに、「×」を押したら、クローズするBootstrap要素についての詳細は公式サイトの「Alerts」をご覧ください。

また、Bootstrapに関してですが、ご自分のバージョンによって要素の指定方法も変わってくるので、ぜひ公式サイトをご覧ください。

Bootstrapのアラートを追加すると、プルダウンが変更された時点で、中身の値にかかわらず「問答無用で」アラートが出るようになります。あとは、if分などで、条件指定するのみですね!

プルダウンを変更する
アラートが表示される

jQuery:要素を削除したい

ただ、上記のやり方だと、プルダウンを変更するたびに毎回「正しい値を選択してください。」のアラートが追加されていってしまいます。

表示する数は、1つで良いので、jQueryの要素追加時に元々あった方のアラートを削除します。

要素の中身を削除するには、追加したい要素そのものではなく、親要素に対して「empty()」を使います。※要素そのものを削除するものもありますが、今回は「親要素内の子要素」という指定にたいので「empty()」を使います。

$(function () {
  $(".trigger").on("change", function () {

    // 一旦要素内をリセットする
    $(".alert-jquery").empty();

    $(".alert-jquery").append(`<div class="alert fade in alert-danger">
      <button class="close" data-dismiss="alert">×</button>
      正しい値を選択してください。
    </div>`);

 });
});

まとめ

以上、jQueryのイベント発火時に、Bootstrapの要素を追加する方法をご紹介しました!

今回は「変更されたら発動」ってな感じですが、使う場面は色々応用できるかと思います!Bootstrapとの組み合わせが一見難しそうですが、通常のHTML要素追加とかわりません!

ぜひ、色々試してみてください。

エンジニア|ポートフォリオ
新人

ふー!! 意外とカンタンだった!!

(深呼吸…)

参考

この記事を書いた人

竹田奈央

東京都港区勤務 / 国立大中退 / フルリモートの女性WEBエンジニア / アラサー / 独身 / 基本は石川県にいながら、都内の会社にてフルリモート勤務 / 7月〜東京・軽井沢・千葉 ADDress ワーケーション 中 / 松本人志・千鳥好き / 3日に1回ウンコツイート(←大事) / Twitterは @takeda_no_nao