jQuery on() not firing on appended a tag
<p>I have a feeling this is an embarrassingly simple mistake I'm making but I just can't see it at the moment.</p>

<p>I have a table which I'm dynamically appending rows to - the the final column of each row contains a link that, when clicked, should remove that row. At the moment, the rows are being added fine but I can't figure out why the event's attached to the remove buttons aren't firing. I've removed the removal code to test with console.log() but I'm seeing nothing in the console.</p>

<p>I know on() should work with appended HTML, what am I missing?</p>

<p><a href="http://jsfiddle.net/52Pbk/" rel="nofollow">http://jsfiddle.net/52Pbk/</a></p>

<p>HTML:</p>

<pre><code> &lt;div id="people"&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;th&gt;First Name&lt;/th&gt;
                    &lt;th&gt;Second Name&lt;/th&gt;
                    &lt;th&gt;Age&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;a href="#" id="add"&gt;Add&lt;/a&gt;
</code></pre>

<p>JS:</p>

<pre><code>var html = '&lt;tr&gt;';
            html += '&lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;';
            html += '&lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;';
            html += '&lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;';
            html += '&lt;td&gt;&lt;a href="#" class="remove_btn"&gt;x&lt;/a&gt;&lt;/td&gt;';
        html += '&lt;/tr&gt;';

$('.remove_btn').on('click', function() {
       console.log('REMOVE BUTTON CLICKED');            
    //$(this).parent().parent().remove();
                return false;
            });

$('#add').on('click', function() {
    $('#people').append(html);
    return false;
});
</code></pre>
