jQueryのは、動的に生成された要素

Question

のネイティブJavaScriptで（）メソッドに私はjQueryを使って、この例のネイティブJavaScriptコードを探しています：

$("#parent").on("click", ".child", function(){ 
    alert("clicked"); 
}); 

私がこれまでのページが付属してい要素で動作しなかった何

var children = document.getElementById("parent").getElementsByClassName("child"); 
for (var i = 0, l = children.length; i < l; i++) 
{ 
    children[i].onclick = foo; 
} 
function foo(el) 
{ 
    alert("child clicked"); 
} 

動的に生成された要素に対してこのコードを動作させるにはどうすればよいですか？

あなたが答えを探している場合は、ここにある： https://stackoverflow.com/a/27373951/2748984

Answer 1

あなたが文書に追加された要素をリッスンして、あなたの機能を結合し、以下のような何かを行うことができます。私はまた、イベントリスナーを結合ではなく、onclick属性にあなたの方法を割り当てることをお勧めしますが、あなたが本当に必要なものを見るためにthis answerをチェックアウトします：

// listen for new elements being added to the document 
    document.addEventListener('DOMNodeInserted', function(event) { 
     // check if they're the type of node you're looking for 
     if (event.relatedNode.querySelectorAll('your selector')) { 
      // bind the event listener 
      event.relatedNode.addEventListener('click', function(event) { 
       // your code 
      }); 
     } 
    });