title: Adding jQuery .click() to dynamically created HTML
body: <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="https://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>