Q:

Datepicker and timepicker not working on appended elements

I'm using datepicker and timepicker for my fields like this:
<input class="datepicker" name="sugg_date[]" type="text" value="" />
<input class="tp" name="sugg_time[]" type="text" value="" />

I'm also using this function to add more rows: 
<script>
    function add_next_row(e, row_a) {
        curr_row = $(row_a).prev('p');
        curr_row.append('<input class="datepicker" name="sugg_date[]" type="text" value="" />');
        curr_row.append('<input class="tp" name="sugg_time[]" type="text" value="" />');

        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }
</script>

But the new rows don't work with the timepicker and datepicker. Can someone please tell me why.

A:

    function add_next_row(e, row_a) {

    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
    curr_row = $(row_a).prev('p');
    var $datefield = $('<input class="datepicker" name="sugg_date[]" type="text" value="" />').datepicker();
    var $timefield = $('<input class="timepickr" name="sugg_time[]" type="text" value="" />');
    curr_row.append($datefield);
    curr_row.append($timefield);
    curr_row.append("<br/>");

    $(".timepickr").timepickr().timepickr({convention:12});

}

