title: jQuery - cannot bind events to dynamic elements?
body: <p>I've come to maintain a piece of javascript that downloads some JSON data from the server, builds a new table row (like <code>$('&lt;tr&gt;&lt;/tr')</code>) and inserts it into the document.</p>
  
  <p>The <code>a</code> node is, at one point created like this:</p>
  
  <pre><code>var a = $('&lt;a class="foo" href="#"&gt;&lt;/a&gt;');
  </code></pre>
  
  <p>and later, an event is bound to it like this:</p>
  
  <pre><code>a.click(function () {
    // yadda yadda
  
    return false;
  });
  </code></pre>
  
  <p>The only problem is that this doesn't seem to work. Neither does binding through <code>on()</code> or the deprecated <code>live()</code>. The handler is simply "ignored", never fires and the page scrolls to the top (due to the <code>href="#"</code>). When binding the event, the element is already <code>append</code>ed to DOM. Any help would be greatly appreciated.</p>
  
  <p>Some contextual information that comes to mind: the element is created inside a loop iterating over the data, but that shouldn't be a problem unless javascript has some <em>really</em> weird stuff going on with scoping, plus <em>everything else</em> I try with the element works: I can change its content, styling, only the event binding doesn't work. And of course, the jQuery version, which is <strong>1.8.3</strong>.</p>