jQuery .on() が動的に生成された要素で動作しない？解決策を徹底解説

2024-06-23

jQuery で動的に生成された入力要素の変更イベントに対処する方法

jQuery で $(document).on('change', '#myInput', function() {...}) のように記述しても、動的に生成された入力要素 (#myInput) で change イベントがトリガーされないことがあります。

原因:

jQuery の on メソッドは、ページロード時に存在する要素に対してのみイベントハンドラをバインドします。動的に生成された要素は、ページロード後に追加されるため、この方法ではイベントハンドラがバインドされません。

解決策:

以下のいずれかの方法で解決できます。

イベントハンドラを委譲する:

親要素にイベントハンドラをバインドし、イベントが伝達されるようにします。以下の例では、#container 要素に change イベントハンドラをバインドし、その中で #myInput 要素の値を取得しています。

$(document).on('change', '#container', function() {
  const value = $(this).find('#myInput').val();
  // value を処理
});

動的に生成された要素に対して個別にイベントハンドラをバインドします。以下の例では、#myInput 要素が生成された後に change イベントハンドラをバインドしています。

$(document).on('DOMNodeInserted', function(event) {
  const newInput = event.target;
  if ($(newInput).is('#myInput')) {
    $(newInput).on('change', function() {
      const value = $(this).val();
      // value を処理
    });
  }
});

jQuery Liveを使用する (非推奨):

jQuery Liveプラグインを使用すると、動的に生成された要素に対してイベントハンドラを簡単にバインドできます。しかし、非推奨なので、上記の方法が推奨されます。

$(document).ready(function() {
  $(document).live('change', '#myInput', function() {
    const value = $(this).val();
    // value を処理
  });
});

補足:

上記の例はあくまで基本的な例であり、状況に応じて適宜調整する必要があります。
イベントハンドラ内で複雑な処理を行う場合は、パフォーマンスを考慮する必要があります。

jQuery で動的に生成された入力要素の変更イベントに対処するサンプルコード

イベントハンドラを委譲する

<div id="container">
  <input type="text" id="myInput" value="初期値">
  <button id="addBtn">追加</button>
</div>

<script>
$(document).ready(function() {
  $('#addBtn').click(function() {
    const newInput = $('<input type="text" id="myInput" value="新しい値">').appendTo('#container');
  });

  $(document).on('change', '#container', function() {
    const value = $(this).find('#myInput').val();
    console.log('入力値が変更されました:', value);
  });
});
</script>

#addBtn ボタンをクリックすると、#container 要素内に新しい #myInput 入力要素が追加されます。
#container 要素で change イベントが発生すると、#myInput 要素の値がコンソールにログ出力されます。

イベントハンドラを動的に生成する

<div id="container"></div>

<script>
$(document).ready(function() {
  $('#addBtn').click(function() {
    const newInput = $('<input type="text" id="myInput" value="新しい値">').appendTo('#container');

    newInput.on('change', function() {
      const value = $(this).val();
      console.log('入力値が変更されました:', value);
    });
  });
});
</script>

この例では、以下の処理が行われます。

新しい #myInput 要素に対して個別に change イベントハンドラがバインドされます。
#myInput 要素の値が変更されると、コンソールにログ出力されます。

jQuery Liveを使用する (非推奨)

<div id="container"></div>

<script>
$(document).ready(function() {
  $('#addBtn').click(function() {
    const newInput = $('<input type="text" id="myInput" value="新しい値">').appendTo('#container');
  });

  $(document).live('change', '#myInput', function() {
    const value = $(this).val();
    console.log('入力値が変更されました:', value);
  });
});
</script>

この例は、2番目の例とほぼ同じですが、非推奨の jQuery Liveプラグインを使用しています。

jQuery で動的に生成された入力要素の変更イベントに対処するその他の方法

イベントバブリングを利用する:

$(document).on('change', '#container', function(event) {
  if (event.target.id === 'myInput') {
    const value = $(event.target).val();
    // value を処理
  }
});

delegated イベントを使用する:

jQuery 1.7以降では、on メソッドの第二引数にセレクタを指定することで、イベントハンドラを委譲することができます。以下の例では、#container 要素の子要素で change イベントが発生したときに、イベントハンドラが実行されます。

$(document).on('change', '#container', function() {
  const value = $(this).find('#myInput').val();
  // value を処理
});

MutationObserver API は、DOM の変更を監視する API です。この API を使用して、動的に生成された要素が追加されたときにイベントハンドラをバインドすることができます。以下の例では、#container 要素の子要素が追加されたときに、イベントハンドラが実行されます。

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      for (let i = 0; i < mutation.addedNodes.length; i++) {
        const newNode = mutation.addedNodes[i];
        if (newNode.id === 'myInput') {
          $(newNode).on('change', function() {
            const value = $(this).val();
            // value を処理
          });
        }
      }
    }
  });
});

observer.observe($('#container')[0], { childList: true });

カスタムイベントを使用する:

動的に生成された要素に対してカスタムイベントを発行し、それを別の要素で処理する方法です。以下の例では、#myInput 要素で inputValueChanged イベントを発行し、#container 要素でそれを処理しています。

$(document).ready(function() {
  $('#addBtn').click(function() {
    const newInput = $('<input type="text" id="myInput" value="新しい値">').appendTo('#container');

    newInput.on('inputValueChanged', function() {
      const value = $(this).val();
      console.log('入力値が変更されました:', value);
    });
  });

  $('#container').on('inputValueChanged', '#myInput', function(event) {
    const value = event.target.value;
    // value を処理
  });
});

それぞれの方法の比較:

方法	メリット	デメリット
イベントバブリング	シンプルでわかりやすい	複雑なイベント処理には向かない
delegated イベント	イベントバブリングよりも効率的	セレクタの書き方が複雑になる場合がある
MutationObserver API	柔軟性が高い	ブラウザによっては対応していない場合がある
カスタムイベント	コードをモジュール化しやすい	イベントハンドラを別途用意する必要がある