Javascript按類名添加對象的監聽器

Question

我想爲動態創建的元素添加「點擊」偵聽器。我的代碼是：

function addListenerToElements(){ 
     var aTags = document.getElementsByClassName("classElements") 
     for (var i=0;i<aTags.length;i++){ 
      aTags[i].addEventListener('click',myFunction); 
     } 
    } 

    function myFunction() { 
     console.log("something"); 
    } 

，但它不工作（沒有在控制檯中沒有錯誤）

Answer 1

至於你說的動態添加元素，事件代表團會是更好的路要走。下面以靜態的元素，同時也爲動態添加的那些作品：

document.getElementById("container").addEventListener("click", function(e) { 
 
    if (e.target && e.target.matches("div.className")) { 
 
    console.log('element clicked', e.target.innerText); 
 
    // or call your function 
 
    } 
 
}); 
 
var index = 0; 
 
document.getElementById('add').addEventListener('click', function(e) { 
 
    var div = document.createElement('div'); 
 
    div.appendChild(document.createTextNode(index++)); 
 
    div.className = 'className'; 
 
    document.getElementById('container').appendChild(div); 
 
});

<div id="container"> 
 
    <div class="className">a</div> 
 
    <div class="className">b</div> 
 
    <div class="className">c</div> 
 
    <div class="className">d</div> 
 
    <div class="className">e</div> 
 
</div> 
 
<button id="add">Add Element</button>

Answer 2

好你錯過的東西在這裏，該事件不會註冊，直到調用函數

addListenerToElements(); 

https://jsfiddle.net/xrqnn20f/1/

addListenerToElements(); 
function addListenerToElements(){ 
     var aTags = document.getElementsByClassName("classElements") 
     for (var i=0;i<aTags.length;i++){ 
      aTags[i].addEventListener('click',myFunction); 
     } 
    } 

    function myFunction() { 
     console.log("something"); 
    }