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>
所感
試してみる前の時点ではイベントを割り当てる場合のようにちょっと面倒くさい書き方をしないといけないのかと思ったが普通の書き方で良いみたい。
関連記事
-
-
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...
-
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
-
jQueryでチェックボックスの全チェック&チェック解除する方法
フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...