title: Bind click event to elements created in a nested for loop
body: <p>I've been doing a <em>lot</em> of reading on closures today, and have looked through quite a few similar questions. I haven't been able to find one that touches on the exact same issue I'm having and how to fix it. Most answers seem to be jQuery related, but there are some fantastic answers out there on how closures work. I know that's where my problem is here. I've tried many different closure examples with no luck.</p>
  
  <p>I have a set of data representing 3 campuses. Each campus has some buildings in it. The first for loop runs through the campuses. The nested for loop runs through the buildings in the current campus and binds a click event to it (which allows me to pan and zoom a leaflet map programmatically.)</p>
  
  <p>I've created a very simplified JSFiddle to represent what I'm trying to do, which shows the issue. Only the buildings in the last "campus" group retain the click event.</p>
  
  <p>Here's the JS code from JS Fiddle. <a href="http://jsfiddle.net/scwutpno/3/" rel="nofollow">http://jsfiddle.net/scwutpno/3/</a></p>
  
  <pre><code>var campuses = {
      "campus1": {
          "buildings": {
              "building1": {
                  "id": 1
              },
                  "building2": {
                  "id": 2
              },
                  "building3": {
                  "id": 3
              }
          },
          "name": "Campus 1"
      },
          "campus2": {
          "buildings": {
              "building1": {
                  "id": 4
              },
                  "building2": {
                  "id": 5
              },
                  "building3": {
                  "id": 6
              }
          },
          "name": "Campus 2"
      },
          "campus3": {
          "buildings": {
              "building1": {
                  "id": 7
              },
                  "building2": {
                  "id": 8
              },
                  "building3": {
                  "id": 9
              }
          },
          "name": "Campus 3"
      }
  };
  
  var buildingLinksContainer = document.getElementById("building-list");
  
  function buildExternalLinks() {
  
      for (var campus in campuses) {
          var container,
          item;
  
  
          if (buildingLinksContainer !== null) {
              buildingLinksContainer.innerHTML += '&lt;div class="building-links" id="' + campus + '-buildings"&gt;' +
                  '&lt;div class="building-links__campus-name"&gt;' + campuses[campus].name + '&lt;/div&gt;&lt;/div&gt;';
  
              container = document.getElementById(campus + '-buildings');
          }
  
  
          for (var building in campuses[campus].buildings) {
  
              item = container.appendChild(document.createElement('li'));
              item.innerHTML = 'Building ' + campuses[campus].buildings[building].id;
  
              item.addEventListener("click", function () {
                  alert('clicked!');
              });
          }
  
      }
  }
  
  buildExternalLinks();
  </code></pre>
  
  <p>I've tried putting the click event in a self-invoking closure, but I don't think it's the data <em>inside</em> the click event that's having issues. It's the node that the click event is being applied to. I don't know if because I'm using a nested for loop, I need some sort of nested closure concept?</p>
  
  <p>Would love to see how this issue is solved. I've already overcome it once by using a closure in a for loop, but this nested for loop just has me stumped.</p>