勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

  jQuery JavaScript

jQueryで後から追加した要素にhasClass / addClass / removeClassを使用したいというケースがあった。イベントを割り当てたい場合「$(document).on('click', 'セレクタ' , function() {」のような形で記述することになるが、この辺りがどうなるのかメモ。

 

ソースコード

hasClass

普通に動作する。描写前だと当然falseになる。

<div id="test_area"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    console.log($(`#test_btn`).hasClass(`btn`)); //false(描写前のため)

    $(`#test_area`).html(`<button id="test_btn" class="btn">button</button>`);

    console.log($(`#test_btn`).hasClass(`btn`)); //true
});
</script>

addClass

これも普通に動作する。

<div id="test_area"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    $(`#test_area`).html(`<button id="test_btn" class="btn">button</button>`);

    $(`#test_btn`).addClass(`btn2`); //<button id="test_btn" class="btn btn2">button</button>に書き換わる
});
</script>

removeClass

これも普通に動作する。

<div id="test_area"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    $(`#test_area`).html(`<button id="test_btn" class="btn">button</button>`);

    $(`#test_btn`).removeClass(`btn`); //<button id="test_btn" class="">button</button>に書き換わる
});
</script>

 

所感

試してみる前の時点ではイベントを割り当てる場合のようにちょっと面倒くさい書き方をしないといけないのかと思ったが普通の書き方で良いみたい。

 - jQuery JavaScript

  関連記事

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...

jQueryにて特定のIDが存在するかチェックし分岐処理する方法

jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...

JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...