動的に要素を追加した際に、うまくイベント発火ができない場合があるので、備忘録として記述します。

jQueryで後から追加した要素にイベントを設定するには、イベントデリゲーションを使用します。on()メソッドを使って、親要素にイベントをバインドすることで、後から追加された要素にもイベントを適用できます。以下はその例です。

OKな例

// 例えば、#parentというIDの要素内の新しい要素にクリックイベントを設定する
$('#parent').on('click', '.child', function() {
    alert('子要素がクリックされました！');
});

// 新しい要素を追加する例
$('#parent').append('<div class="child">新しい子要素</div>');

NGな例

// 既存の要素に直接イベントを設定すると、ページ読み込み時に存在する要素にしか適用されません。
$('#.child').on('click', function() {
    alert('子要素がクリックされました！');
});

// 新しい要素を追加する例
$('#parent').append('<div class="child">新しい子要素</div>');

動作例とサンプルソース

イベントデリゲーションの例

イベントデリゲーションのサンプル

既存の子要素

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>イベントデリゲーションの例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#parent').on('click', '.child', function() {
                alert('子要素がクリックされました！');
            });

            // 新しい要素を追加するボタン
            $('#addElement').on('click', function() {
                $('#parent').append('<div class="child">新しい子要素</div>');
            });
        });
    </script>
</head>
<body>
    <h1>イベントデリゲーションのサンプル</h1>
    <div id="parent">
        <div class="child">既存の子要素</div>
    </div>
    <button id="addElement">新しい子要素を追加</button>
</body>
</html>