jQuery: create a div alert you when its is clicked,

I can't put a title to it. It's inception :)...

I have add div, when it is clicked, it creates alert div. When alert div is clicked it alert me.

that is an example.

$("#add").click(function(){
    $("#add").after("<div class='alert'>Alert</div>");
}

$(".alert").click(function(){
            alert("Here I am");
}

I noticed if I placed a div in the html template as <div class="alert">Alert</div> the alert will work. But if I added the div through the jQuery/JS it will not work.

what is the point of that? to add more inputs and remove it in case he/she added too much, I noticed it didn't work and I wanted to know why:

this is the actual code:

$(document).ready(function(){
    var i           = $("#new_field_count").val();

    //add new field
    $("#addnew_field").click(function(){
        i++;
        $("#new_field").before("<div class='fivepadding'><input name='part1_" + i + "' type='text' placeholder='<?=lang('addform_p1')?>'> = <input name='part2_" + i + "' type='text' placeholder='<?=lang('addform_p2')?>'> <span class='remove clickable'><?=lang('addform_field_remove')?></span> </div>");
            $("#new_field_count").val(i);
    });

    // remove the field
    $(".remove").click(function(){
        i--;
        $(this).parent('div').remove();
        $("#new_field_count").val(i);
    });
});