Dynamically generated html elements stop working
<p>In the following code I have some comments in an array which are displayed in a div using jQuery. Each comment has an options button which works fine until I post a new comment. I tried using unique IDs for each element but it didn't work either.</p>

<p>When the page loads, the options buttons work; but when I submit a new comment, none of the buttons work. What am I doing wrong? </p>

<p>Here's my script:</p>

<pre><code>var i = 0;
var comments_display= "";
var comments = ['Hello World!', 'Hello! This is a comment.'];

//reads the entire array, creates the content, and sends it to the div
function show_comments(){
   for (i=0; i&lt;comments.length; i++){
     comments_display += "&lt;div class='single_comment_container'&gt;";
     comments_display += "&lt;div class='comment_comment'&gt;" + comments[i] + "&lt;/div&gt;";
     comments_display += "&lt;div class='options'&gt;Options&lt;/div&gt;&lt;/div&gt;";
    }
    $("#comment_container").html(comments_display);
    comments_display = "";
 }

//appends a new comment to the array
function new_comment(){
   if ($("#comment_input").val() == null || $("#comment_input").val() == ""){
      alert("Your comment must be at least 1 character long.");
   }

   else{
      comments.push($('#comment_input').val());
       show_comments();
       $("#comment_input").val("");
   }
}

$(document).ready(function(){
   show_comments();

   $("#submit_comment").click(function(){
      new_comment();
   });

//display a message when an element of the class 'options' is clicked
$(".options").click(function(){
   alert("OPTIONS");
});

});
</code></pre>

<p>And here's a fiddle to see how it works. <a href="http://jsfiddle.net/fahKb/3/" rel="nofollow">http://jsfiddle.net/fahKb/3/</a></p>

<p>Thank you for taking your time to read this question.</p>
