Attach click handler to dynamically generated anchor tag
<p>I dynamically generate some markup and inject it into the DOM like this:</p>

<pre><code>content+='&lt;td&gt;&lt;a class="reportLink" onclick="showReport();return false;" href="'+layerResults.features[i].attributes['Information_External']+'"&gt;Info&lt;/a&gt;&lt;/td&gt;';
</code></pre>

<p>I know it would be better to use jQuery to attach the click handler instead of using an inline handler.</p>

<p>The problems are, even using an inline handler and a function like this:</p>

<pre><code>function showReport() {
  console.log('stopped');
}
</code></pre>

<p>Still doesn't prevent the link from navigating away from my page. </p>

<p>The second problem is, when I try using </p>

<pre><code>jQuery('.reportLink'.on('click', function(e) {
  e.preventDefault();
  console.log('clicked');
});
</code></pre>

<p>The event never gets attached. I'm using jQuery 1.7.2.</p>

<p>This is driving me a bit insane as it's a simple task I've done about a zillion times in jQuery &lt;= 1.5.</p>
