title: jQuery .on("click"...) with dynamically created elements not working
body: <p>So I am having some troubling results with jQuery ".on" function and a dynamically created element, the code I am using is this:</p>
  
  <p>this is called in a function sometime random during runtime:</p>
  
  <pre><code>$(".activity-feed").append('&lt;div class="feed-story big-feed-story feed-story-comment multiline-feed-story"&gt;\
          &lt;div class="photo-view inbox-size photo-view-rounded-corners"&gt;\
              &lt;div class="comment-icon"&gt;\
              &lt;/div&gt;\
          &lt;/div&gt;\
          &lt;div class="comment-content"&gt;\
              &lt;div class="delete ucomment-delete click-target" id="ucomment-'+uqid+'" tabindex="-1" style="outline:none;"&gt;&lt;/div&gt;\
              &lt;span class="feed-story-creator"&gt;&lt;a href="/user/'+uid+'/'+username+'"&gt;'+username+'&lt;/a&gt;&amp;nbsp;&lt;/span&gt;\
                  &lt;span class="comment-text"&gt;\
                      &lt;span&gt;\
                          &lt;span style="white-space: pre-wrap;"&gt;'+$(".comment-box").html()+'&lt;/span&gt;\
                      &lt;/span&gt;\
                  &lt;/span&gt;\
              &lt;div&gt;\
                  &lt;span class="feed-story-footer"&gt;&lt;span class="story-timestamp-view"&gt;'+time+'&lt;/span&gt;&lt;/span&gt;\
              &lt;/div&gt;\
          &lt;/div&gt;\
      &lt;/div&gt;');
  </code></pre>
  
  <p>and then this function should allow for comment deletion (its defined at the bottom of the page, not after document ready)</p>
  
  <pre><code>$(".delete").on("click", function() {
      alert('test....');
  });
  </code></pre>
  
  <p>however, I click on the "ucomment-delete" button, and nothing happens :(, however if I click the comments that were there on load, it works<br>
  Why is this? What am I doing wrong?</p>