jquery .on('click', func) function not doing its job
<p>How to create the issue:</p>

<ol>
<li>click on existing trigger links - something happens (pass)</li>
<li>click on the "add trigger" button, which appends a new trigger link w/ same class</li>
<li>click on the newly created link, and it does not do the same thing as the 1st 2 links that existed from the start (fail)</li>
</ol>

<p>Here is my example -: <a href="http://jsbin.com/equjig/3/edit" rel="nofollow">http://jsbin.com/equjig/3/edit</a></p>

<p>I thought the <code>.on('click', func)</code> function was good for adding events to current elements in the dom, but also for future elements that get added to the dom?</p>

<p>Here is my current javascript :</p>

<pre><code>$(document).ready(function() {
  $(".link").on('click', function(e) {
    e.preventDefault();
    $("#out").append("clicked&lt;br/&gt;");
  });

  $("#b1").on('click', function() {
    $("#p1").append("&lt;a href='#' class='link'&gt;new trigger&lt;/a&gt;");
  });
</code></pre>

<p>here is the HTML</p>

<pre><code>&lt;button type="button" id="b1"&gt;add trigger&lt;/button&gt;
  &lt;p id="p1"&gt;
    &lt;a href="#" class="link"&gt;trigger 1&lt;/a&gt;
    &lt;a href="#" class="link"&gt;trigger 2&lt;/a&gt;
  &lt;/p&gt;
  &lt;div id="out"&gt;&lt;/div&gt;
</code></pre>

<p>Note - im using jQuery 1.7 </p>

<p>Thanks!</p>
