は、イベントリスナーを追加し、動的に生成された要素

Question

私はにconsole.logデータ数の値 JavaScriptを使用して、クリックイベントに<span>の属性にしようとしています上のプレーンなJavaScriptを使用してクリック上の値を取得します。クライアント側でコードの実行中に複数のスパンが動的に作成され、それぞれに「ダイナミックスパン」というクラスがあります。

サンプル：

<span class="dynamic-span" data-number="1">This is a dynamic span</span> 

以上のスパンがクリックされたときに、番号 "1" が記録され、コンソールになります。

jQueryを使用して番号を記録することができます。

$("body").on("click", ".dynamic-span", function (e) { 
    e.preventDefault(); 
    var number = $(this).data("number"); 
    console.log(number); 
}); 

私は単純なJavaScriptを使用して同じ結果を達成したいと思います。

私は "dynamic-span"クラスを使用してスパンを対象としています。

var elems = document.getElementsByClassName("dynamic-span"); 

したがって、ClassNameを使用してスパンを取得できます。しかし、私はHTMLCollectionを取得しており、配列ではなく、forループは機能していません。

コード：

var 
    elems = document.getElementsByClassName("dynamic-span"), 
    i; 

for (i = 0; i < elems.length; i++) { 
    elems[i].addEventListener("click", function (e) { 
     console.log(this.getAttribute("data-number")); 
    }); 
} 

私はまた、次のようにStackOverflow質問 JavaScript click event listener on class しかし、誰の成功を確認しています。

下記参照 https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassNameはElement.getElementsByClassName（）メソッドは、ライブHTMLCollectionを返し示唆する。

上記の課題を達成するための方法をお勧めします。

Answer 1

うまくいけば、これはあなたのためにそれを行う必要があります。

document.body.onclick = function (e) { 
    //get event object (window.event for IE compatibility) 
    e = window.event || e; 
    //get target dom object reference 
    var targetDomObject = e.target || e.srcElement; 

    //extra checks to make sure object exists and contains the class of interest 
    if ((targetDomObject) && (targetDomObject.classList) && (targetDomObject.classList.contains("dynamic-span"))) { 
     var number = targetDomObject.getAttribute("data-number"); 
     console.log(number); 
    } 
} 

これは、バブリングを使用しています。イベントが発生するたびに、処理されたとマークされるか、それ以上の親がなくなるまで、すべてのオブジェクトの親を通して移動します。したがって、ボディのクリックイベントにアタッチすると、ページ上のすべての未処理のクリックイベントを捕捉できます。メソッドの先頭はイベント情報への参照を取得し、最初のターゲットオブジェクトをイベントから取得します。それで、あなたがする必要があることは、オブジェクトがあなたが扱いたいオブジェクトであるかどうかを見ることです。ここで

は、コードのjsfiddleである：それは働いたhttps://jsfiddle.net/t4jqtLas/