イベントリスナーを動的コンテナに追加する

Question

ページにまだ存在しない要素にクリックイベントリスナーを追加する際に問題が発生しています。ちょうど私が次の コードをJQuery内で実行していることに注意してください。準備が整っているので、DOMがロードされた後に実行されます。だから私はボタンのタイプとして使用しているdivを持っています

<div id="openContainer"> ... </div> 

ここでこのdivをクリックすると、別のdivがページに動的に追加されます。このdivは、上記のクリックイベントが発生した場合にのみ追加されます。追加されたdivには、 idの検索ボタンがあります。私はこれにイベントリスナーを追加しようとしています。これまでのところ、私はこれを実行すると、この

document.getElementById('openContainer').addEventListener('click', function() { 
    document.getElementById('search').addEventListener('click', function() { 
     alert("ADDED") 
    }); 
}); 

は、しかし、私はのdocument.getElementById（...）がnullのエラーを取得しています。私はこれの背後にある理由は、実際の動的divが追加される前にイベントリスナーが追加されているためだと思います。実際、タイムアウトなどで動作するため、これが当てはまります。

document.getElementById('openContainer').addEventListener('click', function() { 
    setTimeout(function() { 
     document.getElementById('search').addEventListener('click', function() { 
      alert("ADDED") 
     }); 
    }, 2000); 
}); 

タイムアウトなしでこれを行う方法はありますか？

おかげ

Answer 1

既存の要素の上に単一のイベント・ハンドラを置き、addEventListener()の匿名関数で、イベントがトリガされた時に要素のidを確認することができます。

document.getElementById('openContainer').addEventListener('click', function(event){ 
    var clicked = event.target; 
    if (clicked.id === 'openContainer') { 
    // the '#openContainer' element was clicked, 
    // ...do stuff 
    } else if (clicked.id === 'search') { 
    // the '#search' element was clicked, 
    // ...do stuff 
    } 
}); 

Answer 2

DOM要素が作成される前にJavaScriptが実行されている可能性があります。

スクリプトタグがタグの後にあることを確認してください。