title: jquery 1.7 click event after append not working
body: <p>I'm playing around with event-delegation from <a href="http://learn.jquery.com/events/event-delegation/" rel="nofollow">http://learn.jquery.com/events/event-delegation/</a>
  .I have the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="description" content="A small web app to manage todos"&gt;
          &lt;title&gt;TO-DO jQuery Tests&lt;/title&gt;
  
      &lt;!--src attribute in the &lt;script&gt; element must point to a copy of jQuery --&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $( "article" ).on( "click","a", function() {
                  console.log( "The ID attribute of the link is: " + $(this).attr('id'));
              });
              //The .append()method inserts the specified content as the last child of each element in the jQuery collection --&gt;
              $( "#test-container" ).append("&lt;article&gt; &lt;a href=\"#\"id='link-2'&gt;Link 2&lt;/a&gt; &lt;/article&gt;" );
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="test-container"&gt;
          &lt;article&gt;
              &lt;a href="#" id="link-1"&gt;Link 1&lt;/a&gt;
          &lt;/article&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>
  When I click on Link2 I get no output on the console? Why isn't the event-handling working?</p>