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

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>

所感

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