title: Dojo events: getting it to work with dynamically added DOM elements
body: <p>I have a method of a class as follows:</p>
  
  <pre><code>add_file: function(name, id, is_new){
      // HTML: &lt;div class="icon mime zip"&gt;name.zip &lt;a&gt;x&lt;/a&gt;&lt;/div&gt;
      var components = name.split('.');
      var extension = components[components.length-1];
      this.container.innerHTML += "&lt;div id='"+id+"' class='icon mime "+extension+"'&gt;"+name+" &lt;a id='remove-"+id+"' href='#remove'&gt;x&lt;/a&gt;&lt;/div&gt;";
      // Add event to a tag
          dojo.connect(dojo.byId('remove-'+id), 'onclick', function(ev){
              // here i am
          });
  },
  </code></pre>
  
  <p>All is working well, until I run this method more than once. The first time the event is registered correctly, and clicking the 'x' will run the "here i am" function. However, once I add more than one node (and yes, the ID is different), the event is registered to the last node, but removed from any previous ones.</p>
  
  <p>In affect I have this:</p>
  
  <pre><code>&lt;div id="field[photos]-filelist"&gt;
  &lt;div id="file1" class="icon mime jpg"&gt;file1.jpg &lt;a id="remove-file1" href="#remove"&gt;x&lt;/a&gt;&lt;/div&gt;
  &lt;div id="file2" class="icon mime jpg"&gt;file2.jpg &lt;a id="remove-file2" href="#remove"&gt;x&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...and the remove link only works for the last node (remove-file2 in this case).</p>