jquery .on() not working as expected
<p>here is a link to jsfiddle. <a href="http://jsfiddle.net/5U4fT/" rel="nofollow">http://jsfiddle.net/5U4fT/</a>
If you have a solution, please edit it there and send a link. Thanks so much!</p>

<p>The HTML is </p>

<pre><code>    &lt;html&gt;
        &lt;body&gt;

           &lt;a class="bonk" href="#"&gt;hi&lt;/a&gt;&lt;br /&gt;
           &lt;a class="make-new" href="#"&gt;add bonk class to dom&lt;/a&gt;&lt;br /&gt;

        &lt;/body&gt;
     &lt;/html&gt;
</code></pre>

<p>And the Javascript is</p>

<pre><code>   $('body').on('click', '.bonk ', function() {
       return false;
     }).each(function() {
        $('.bonk').click(function() {
            alert("hi");
         });
    });

    $(".make-new").click(function() {
        $('body').append('&lt;a class="bonk" href="#"&gt;hi&lt;/a&gt;&lt;br /&gt;');
     });
</code></pre>
