title: Unobtrusive JavaScript event on auto-generated elements
body: <p>I have this PHP code in a loop for every post on the admin page of a blog:</p>
  
  <pre class="lang-php prettyprint-override"><code>echo '&lt;a class="delete_link" id="delete_link_'.$row['rowid'].'"&gt;Delete&lt;/a&gt;';
  </code></pre>
  
  <p>So it outputs:</p>
  
  <pre><code>&lt;a class="delete_link" id="delete_link_1"&gt;Delete&lt;/a&gt;
  &lt;a class="delete_link" id="delete_link_2"&gt;Delete&lt;/a&gt;
  &lt;a class="delete_link" id="delete_link_3"&gt;Delete&lt;/a&gt;
  </code></pre>
  
  <p>and so on…</p>
  
  <p>By clicking on these links, I would like the browser to send a DELETE request through XHR, but I don't know <strong>how to set up the events an unobtrusive way</strong>. My example doesn't work, as <code>sendDeleteRequest()</code> is fired with the last added id, no matter which link I click on:</p>
  
  <pre class="lang-js prettyprint-override"><code>function sendDeleteRequest(id) {
      // I only put a simple alert in this function for now.
      alert("Id of firing element: " + id);
  }
  
  onload = function() {
      var deleteLinks = document.getElementsByClassName("delete_link");
      for (var node in deleteLinks) {
          deleteLinks[node].onclick = function() {
              sendDeleteRequest(deleteLinks[node].getAttribute("id"));
          }
      }
  }
  </code></pre>
  
  <p>What's wrong with this code? Anything else I should pay attention to? I've tried the same with <code>addEventListener()</code> with no success. I still use XHTML 1.0 and I can't use jQuery in this project.</p>