Appended table row not responding to onClick

Question

I've created a table that contains several rows with input fields. In the last 'td' of my second to last 'tr', I've added two divs that control adding or removing a table row. Take a look at my (very basic) code.

<table id='mytable'>
        <tr><th>Name</th><th>Job</th><th>Time</th><th></th></tr>
        <tr><td><input id="name"/></td><td><input id="job"/></td><td><input id="time"/></td><td><div id='addPerson'>+</div></td></tr>
        <tr id="calcRow"><td id='People'></td><td id='Jobs'></td><td id='TimeTotal'></td><td></td></tr>
</table>

Pretty simple right? Using jQuery I added an onClick event on the 'addPerson' div inside my table. Here's my (again very basic) code:

$("#addPerson").on('click', function(){
    //append a new row
});

Appending the new row works, a new row is added before my last row ('calcRow') and is almost identical to the second to last row. The only thing different is that the new second to last row has a second div ('removePerson') next to the already existing div ('addPerson') and the 'addPerson' div from my old second to last row is removed.

Now to my problem, when I click on the 'addPerson' or 'removePerson' nothing happens! I've created a fiddle to show the issue:

http://jsfiddle.net/hegxxayp/2/

I've tried '.live' and '.click' instead of '.on', but nothing worked so far. Do I have to bind the event in some way, or is my code just faulty?