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

Question

I am working with Google Maps API and I am trying to get a website running that shows you information about a specific location when it is clicked on. There are little clickable buttons at the bottom of the information div that are meant to change the information displayed based on the button that is clicked on.

http://i61.tinypic.com/vxge4o.jpg -->example

These buttons only show up after the location on the map is clicked on, so my addEventListener shows up as an error "Cannot call method 'addEventListener' of null"; I'm assuming this occurs because the method is looking for a button that isn't there yet.

Is there a way to get the addEventListener method working only after a location has been selected on the map?

Here is the Javascript code I currently have:

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();
  });
}

And here is the HTML snippet that corresponds with it:

 <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>

I have attempted the solutions on each of these pages without avail.

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

Attach a body onload event with JS

When I try to use the window.onload option, my map breaks and just shows a gray box. I tried putting it in a script tag in the html file as well, but that did not work either.

I am sure there is a way of doing this, but I am quite new to JavaScript so I am probably missing some idea here. Any help would be great!

EDIT

I know this may not be the easiest, but since I am learning JavaScript right now, I would like an answer in pure JavaScript, although I know jQuery would probably be more simple. Thanks again!

Second Edit

My original information div is already created in the HTML file. I used CSS to hide it

#information{
display: none;
}

and then used:

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

to display it when the point is clicked on

Answer 1

If you can re-purpose the elements rather than creating new ones for each use, you can try something like this (rough example to so you the idea): 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.
}

*You will need to handle old IE attachEvent alternatives if you need to support those older browsers

Answer 2

I actually used @epipav 's suggestion of making the event occur after the elements were shown. It ended up looking like this.

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

I'm not sure if I should be editing my previous post or creating an answer, since this is the solution I used. I'm also not sure if I should delete the question or not, as it may help others in the future.