title: Dynamically adding 'divs' using jQuery
body: <p>This is the script that I've written. The first click function works fine but the other two don't work as expected. The  tags follow the href link and the function for its click doesn't work. Is it because they have been created by jQuery and are not in the original html page?</p>
  
  <pre><code>$("#edit-description").click(function(){
      $("#add-description").replaceWith( "&lt;div id='add-description'&gt;&lt;textarea cols='43' rows='9' placeholder='Add a description...'&gt;&lt;/textarea&gt;&lt;a href='#' class='u-update'&gt;Update&lt;/a&gt;&lt;a href='#' id='add-description-cancel'&gt;Cancel&lt;/a&gt;&lt;/div&gt;" );
      return false;
    }); 
  
    $("#add-description-cancel").click(function(){
      $("#add-description").replaceWith( '&lt;div id="add-description"&gt;Write a &lt;a href="/#" id="edit-description"&gt;description&lt;/a&gt; about the college.&lt;/div&gt;');
      return false;
    }); 
  
    $(".u-update").click(function(){
      $("#add-description").replaceWith( '&lt;div id="add-description"&gt;Write a &lt;a href="/#" id="edit-description"&gt;description&lt;/a&gt; about the college.&lt;/div&gt;');
      return false;
    }); 
  </code></pre>