删除jquery生成的字段不起作用

我有一个HTML表单如下:

Add Note
    

        

             
Add Another Input Box
            

                

                    
                
            

        
    

而javascript是:

$('#add_note').click(function(){
    if($("input[type='checkbox'][name='add_note']:checked").length > 0)
    {
    $('#addDiv').show(500);
    }else{
    $('#addDiv').hide(200);
    }
})

  var i = 2;
$('#addScnt').click(function(){

    var html = ''; 
    html += '
';
    html += 'Cancel';
    html += '
';

    $('#new_notes').append(html);

    i++;
    });
    $('#cancel_field').click(function(){
    alert('Test ')
    $(this).parents('p').remove(); 
});

现在,我的问题是,当我点击cancel它,它什么都不做,既不提醒也不删除父div.代码有什么问题？

编辑:

JSFiddle演示