如何向页面加载时没有立即显示的元素添加事件侦听器?

我正在与谷歌地图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事件

当我试图使用窗口时。Onload选项，我的地图中断，只是显示一个灰色的框。我试着把它放在html文件中的一个脚本标签，但也没有工作。

我确信有一种方法可以做到这一点，但我对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";
});

当点被点击

//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);