Adding jQuery .click() to dynamically created HTML
<p>On my web app, I am dynamically creating a live feed using jQuery to parse a JSON object and dynamically creating table rows in html (see my earlier question <a href="http://stackoverflow.com/q/5773976/258813">here</a> for an example )</p>

<p>Every table row I dynamically create from the JSON object, I add an image (using a standard html img tag) - What I want to do now, is create a .click() function that performs an async ajax call when that image is clicked.</p>

<p>so, if my code that creates the table rows dynamically looks like this:</p>

<pre><code>var html = "&lt;tr&gt;"
            + "&lt;td&gt;&lt;img class=\"status_refresh\" src=\"/refresh.png\" id=\"refresh_id\"/&gt;&lt;/td&gt;"
            + "&lt;/tr&gt;";

$('#peopleDirectory').append(html);
</code></pre>

<p>In my JSP, where the peopleDirectory div is defined, and the html will be appended, I have the following javascript:</p>

<pre><code>$('.status_refresh').click(function () { 
    console.log($(this).attr('id')); 
});
</code></pre>

<p>But nothing is happening when I click.. can anyone advise what I am doing wrong?</p>

<p>Thanks!</p>
