動的に作成された要素のイベント リスナー

jQuery を使用せずに動的に生成された要素にイベント リスナーを追加するには、イベント委任を使用できます。方法は次のとおりです。

イベント委任を使用する
イベント オブジェクトの target プロパティを使用すると、イベントが発生した要素を識別できます。これを使用すると、イベント リスナーを親要素にバインドし、ターゲット要素が特定の基準に応答するかどうかを確認できます。例:

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Do your action on the newly created 'li'
  }
});

この例では、イベント リスナーが本文にバインドされており、子要素をクリックすると、コードはそれが 'li' かどうかをチェックします。存在する場合、指定されたアクションが実行されます。

注意事項
このアプローチは、イベント委任メカニズムをサポートする最新のブラウザーで適切に機能することに注意してください。古い IE バージョンの場合、attachEvent.