如何将事件侦听器添加到页面加载后不会立即显示的元素？

Question

我正在使用Google Maps API，正在尝试运行一个网站，该网站在单击时会向您显示有关特定位置的信息。 信息div底部几乎没有可单击的按钮，这些按钮可用来更改基于所单击按钮的显示信息。

http://i61.tinypic.com/vxge4o.jpg- >示例

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

是否只有在地图上选择位置后才能使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();
  });
}

以下是与此相对应的HTML代码段：

 <div id="information">
    <p>Location</p>
    <div id="details">
        <p>Candidate Type:</p>
        <p>Candidate Name:</p>
        <p>Location Name:</p>
        <p>PeopleSoft Location Code:</p>
        <p>Street Address:</p>
        <p>City:</p>
        <p>County:</p>
        <p>State:</p>
        <p>Zipcode:</p>
        <p>Latitude:</p>
        <p>Longitude:</p>
        <p>From 2C Survey?</p>
    </div>
    <center>
        <input type="image" src="*image source*" id="1"/>
        <input type="image" src="*image source*" id="2"/>
        <input type="image" src="*image source*" id="3"/>
        <input type="image" src="*image source*" id="4"/>
        <input type="image" src="*image source*" id="5"/>
        <input type="image" src="*image source*" id="6"/>
        </center>
    <div id="back"><center>
        <input type="image" src="*image source*"/>
    </center></div>
</div>

我在这些页面的每一个上都尝试了解决方案，但无济于事。

https://stackoverflow.com/a/9856159/3838411

使用JS附加body onload事件

当我尝试使用window.onload选项时，地图破裂，仅显示一个灰色框。 我也尝试将其放在html文件的script标记中，但这也不起作用。

我敢肯定有一种方法可以做到这一点，但是我对JavaScript还是很陌生，所以我可能在这里缺少一些想法。 任何帮助将是巨大的！

编辑

我知道这可能不是最简单的，但是由于我现在正在学习JavaScript，所以我想用纯JavaScript给出答案，尽管我知道jQuery可能会更简单。 再次感谢！

第二次编辑

我的原始信息div已在HTML文件中创建。 我用CSS隐藏了它

#information{
display: none;
}

然后使用：

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

单击该点时显示它

Answer 1

如果您可以重新设计元素的用途，而不是每次使用都创建新元素，则可以尝试这样的事情（举一个粗糙的例子，这样您就可以了）： JSFiddle

//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.
}

*如果您需要支持那些旧的IE浏览器，则需要处理旧的IE AttachEvent替代方法

Answer 2

实际上，我使用@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);

我不确定是应该编辑上一篇文章还是创建答案，因为这是我使用的解决方案。 我也不确定是否应该删除该问题，因为这将来可能会帮助其他人。