Question

在单击从数组创建的图像时，onclick和addEventListener（'click'，function（）{}）均无效。

我正在尝试在Google Map API上显示geojson数据。使用javascript，我已将数据存储到数组中，并在Google地图上成功显示了每个项目。图像应可单击，并在单击时显示更多信息。

for (var i = 0; i < arrItems.length; i++) {
    var image = arrItems[i].properties.image;

    //create image(list_img)
    var list_img = document.createElement("img");
    list_img.className = "list_img card-img-top";
    list_img.src = arrItems[i].properties.image; 

    list_img.onclick = alert(i);
    list_img.addEventListener("click",function(){
        console.log(i);
    });
}

在上面的代码中，如果我使用onclick，则会在网页加载之前提醒所有ID号。在页面加载后单击图像时，没有任何响应。如果我使用addEventListener，则无论单击哪个图像，它始终会输出最后一个i号。

Answer 1

您的问题是您要同时创建元素和绑定。

您应该首先创建元素，然后在DOM中找到它们，最后可以绑定事件侦听器。

如果您同时执行这两个操作，则会立即触发事件，并且一旦编写元素，您将无法正确绑定这些元素。

var container = document.querySelector('.container')

// list of fake items
var arrItems = ['a', 'b', 'c'];

// create your elements and append them to the DOM
arrItems.forEach(e => {
  //create image(list_img)
  var list_img = document.createElement("div");
  list_img.className = "list_img card-img-top";
  list_img.innerHTML = e;
  //append to my example element
  container.append(list_img)
})

// find your new elements in the DOM
var elements = document.querySelectorAll('.list_img');

// finally, append the event listeners
elements.forEach(e => e.addEventListener("click", function(){
    alert('click!');
}));

<div class="container"></div>

Answer 2

我们可以使用IIFE（立即调用的函数表达式）使您的代码正常工作

for (var i = 0; i < arrItems.length; i++) {
    var image = arrItems[i].properties.image;

    //create image(list_img)
    var list_img = document.createElement("img");
    list_img.className = "list_img card-img-top";
    list_img.src = arrItems[i].properties.image; 

    list_img.onclick = (function(i){
        return function(event){
            console.log(i, event.target)
        }
    })(i)
    list_img.addEventListener("click",(function(i){
        return function(event){
            console.log(i, event.target)
        }
    })(i));
}

这将创建一个新的i，范围仅限于当前函数。

单击在js中创建的图像以显示信息

2 个答案: