[jQuery]あとから追加した要素のclickイベントが発動しない時の対処方法

click イベント

HTMLで一番大事な部分と言えるクリックされた時の動作jQuery を使うことで簡単に設定する事ができますが、記述の仕方によってはWEBページ表示後に追加された要素はクリックイベント対象外になります。以下の方法で対処できます。

WEBページ表示後に要素を追加してクリックが反応しない買い方

<!-- .child にクリックイベントを追加 -->
<div id="parent">
    <div class="child">桃太郎</div>
    <div class="child">浦島太郎</div>
    <div class="child">金太郎</div>
</div>

<script>
    $('.child').on('click', function(){
        alert('クリックされました!');
    });
</script>

追加した要素でもクリックイベント動作する記述方法

//HTMLは省略
<script>
    $('#parent').on('click', '.child', function(){
        alert('クリックされました!');
    });
</script>

一見、#parent要素にクリックイベントを追加しているようですが、on()メソッドの第2引数に子要素の.childを記述します。これであとから追加した要素にもクリックイベントを付ける事ができます。

タイトルとURLをコピーしました