如何将事件侦听器添加到多个元素ID

Question

下面是我将侦听器添加到多个ID的方法。

function onImageClick(event) {
//i am not getting below console msg
  console.log('Event Registered');
}

var queryResult = document.getElementsByClassName('ui-grid-cell');
Array.from(queryResult).forEach(function(element) {
  document.getElementById(element.id).addEventListener("click",onImageClick);
});

以上方法对我不起作用。 我在做什么错？

Answer 1

这会工作

  function onImageClick(event) { alert('Event Registered'); } var queryResult = document.getElementsByClassName('ui-grid-cell'); for(var i=0;i<queryResult.length;i++){ if(queryResult[i].id && queryResult[i].id !=""){ document.getElementById(queryResult[i].id).addEventListener("click",onImageClick); } } 

 img{ margin:15px; padding:10px; border-radius:10px; box-shadow:1px 1px 1px #ccc; } 

 <img title='this should listen' src='https://www.google.com.eg/images/nav_logo242.png' class='ui-grid-cell' id='div1'/> <img src='https://www.google.com.eg/images/nav_logo242.png' class='ui-grid-cell'/> <img title='this should listen' src='https://www.google.com.eg/images/nav_logo242.png' class='ui-grid-cell' id='div2'/> <img src='https://www.google.com.eg/images/nav_logo242.png' class='ui-grid-cell'/> 

Answer 2

您的相同代码工作正常，也许您错过了在图像上添加id的问题？

 function onImageClick(event) { //i am not getting below console msg console.log('Event Registered'); } var queryResult = document.getElementsByClassName('ui-grid-cell'); Array.from(queryResult).forEach(function(element) { document.getElementById(element.id).addEventListener("click",onImageClick); }); 

 <img src="https://dummyimage.com/50x50/000/fff" class="ui-grid-cell" id="one"> <img src="https://dummyimage.com/50x50/ccc/fff" class="ui-grid-cell" id="two"> <img src="https://dummyimage.com/50x50/123456/fff" class="ui-grid-cell" id="three"> 

Answer 3

这种方法应该有效：

var queryResult = document.getElementsByClassName('ui-grid-cell');
Array.from(queryResult).forEach(function(element) {
    element.addEventListener("click",onImageClick);
});

Answer 4

如果您使用JQuery，请使用

$(".ui-grid-cell").click(function(){

});