Javascript 如何向页面加载时不会立即显示的元素添加事件侦听器？

我正在使用GoogleMapsAPI，我正在尝试运行一个网站，当点击它时，它会向您显示特定位置的信息。信息div底部有一些可单击的按钮，用于根据单击的按钮更改显示的信息

-->示例

---

这些按钮仅在单击地图上的位置后显示，因此我的addEventListener显示为错误“无法调用null的方法'addEventListener'”；我假设发生这种情况是因为该方法正在寻找一个尚未出现的按钮

有没有办法让addEventListener方法只在地图上选择了一个位置后才起作用

以下是我目前拥有的Javascript代码：

function change() {
  var within = document.getElementById("information").innerhtml;
  within = "<p>hi</p>";
}

function recreate(){
  var alter = document.getElementById("2");
  alter.addEventListener('click', function(event) {
    change();
  });
}

然后使用：

google.maps.event.addListener(marker, 'click', function(){
    map.setZoom(16);
    map.setCenter(marker.getPosition());
    document.getElementById("information").style.display="block";
});

---

要在单击点时显示它，如果您可以重新指定元素的用途，而不是为每次使用创建新的元素，您可以尝试类似的方法（粗略示例，以便您理解此想法）：

//traverse the DOM to get to your center container
var thediv = document.getElementById("information");
var thecenter = thediv.getElementsByTagName("input");

//set up the event handler for all of the images with a loop
for (i = 0; i < thecenter.length; i++) { 
    thecenter[i].addEventListener("click", function(){ inputimageclicked(this) }, false);
}

//function to handle all image clicks
//as you can see, you can access the object that fired the 
//click event and use it to vary the effect of the function
//you can access any attribute, style, etc of the target object
function inputimageclicked(obj) { 
   alert("input image with id: " + obj.id); 
   //this is where you will determine what <input> fire the event 
   //and react as you need to (call another function, show/hide 
   //something, etc.
}

//遍历DOM以到达中心容器
var thediv=document.getElementById（“信息”）；
var thecenter=thediv.getElementsByTagName（“输入”）；
//使用循环为所有映像设置事件处理程序
对于（i=0；i

---

*如果你需要支持那些旧的浏览器，你就需要处理旧的IE替代方案。实际上，我使用了@epipav的建议，让事件在元素显示后发生。结果是这样的

google.maps.event.addListener(marker, 'click', function(){
    *actions that are put into place*

    var myBtn = document.getElementById("2");
    myBtn.addEventListener('click', function(event) {
      change1();
    }, false);
    function change1(){ 
      *some function*
    };
}, false);

---

我不确定是否应该编辑我以前的帖子或创建答案，因为这是我使用的解决方案。我也不确定是否应该删除该问题，因为它可能会在将来帮助其他人。

“这些按钮仅在单击地图上的位置后显示”。那么，在按钮创建之后，你不能添加事件侦听器吗？你能显示创建信息div的代码吗？@epipav有没有办法具体说明事件侦听器发生的时间？我不知道这一点；谢谢你的提示，我会调查的！@JRulle我用代码编辑了我的原始帖子；我不确定是否没有首先在CSS中使用div是做这件事的正确方法，但我就是这么做的with@IsheetaSDIV是在页面最初加载时创建的还是在第一次需要时才创建的？（还是在每次调用时创建/添加到DOM并从DOM中销毁/删除？）

//traverse the DOM to get to your center container
var thediv = document.getElementById("information");
var thecenter = thediv.getElementsByTagName("input");

//set up the event handler for all of the images with a loop
for (i = 0; i < thecenter.length; i++) { 
    thecenter[i].addEventListener("click", function(){ inputimageclicked(this) }, false);
}

//function to handle all image clicks
//as you can see, you can access the object that fired the 
//click event and use it to vary the effect of the function
//you can access any attribute, style, etc of the target object
function inputimageclicked(obj) { 
   alert("input image with id: " + obj.id); 
   //this is where you will determine what <input> fire the event 
   //and react as you need to (call another function, show/hide 
   //something, etc.
}

google.maps.event.addListener(marker, 'click', function(){
    *actions that are put into place*

    var myBtn = document.getElementById("2");
    myBtn.addEventListener('click', function(event) {
      change1();
    }, false);
    function change1(){ 
      *some function*
    };
}, false);