jQuery UI picker with input box added using jQuery append - php

Question

I am printing a form in a row on a page. The row contains a few columns which hold the form elements. Much like a table but in CSS.
When the user clicks on a link with the ID add_transaction_row then a little bit of jQuery is called which appends another row/div to the page. This row contains an identical set of div's and form elements as the row above.
I have named the elements date[], sub_cat_id[] etc so that I get an array of the updates to process on the next page.
I am using the jQuery datepicker for the date input box. I have a trigger on on class called .datepicker.
On the first row the jQuery date picker appears as expected. However when I click into any of the date input boxes on the rows below (the new rows/input box's added by jQuery append) then the datepicker does not work.
I was thinking that it might be something to do with me naming them all the same so I have given them all a unique ID. Still no luck.
I am now thinking its something to do with jQuery adding the .datepicker on page load and then when I click the bottom to add a new row this is adding the html to the source but after jQuery datepicker has loaded so it does not pick the new date/input box's up?
If anyone could shed any light on this I would appreciate it.
<?php
$my_new_split = '';
$my_new_split .= '<div class="split_transaction_box">';
$my_new_split .= '<div class="span-7">' . form_input('date[]', '', 'id="' . random_string('numeric', 8) . '" class="datepicker"') . '</div>';
$my_new_split .= '<div class="span-7">' . form_dropdown('sub_cat_id[]', $subcategories_options) . '</div>';
$my_new_split .= '<div class="span-5">' . form_input('reference[]') . '</div>';
$my_new_split .= '<div class="span-4 last">' . form_input('ammount[]') . '</div>';
$my_new_split .= '<div class="clearfix"></div></div><!-- /.split_transaction_box -->';
$my_new_split = trim($my_new_split);
$replace_this = array("\r\n", "\n", "\r");
$my_new_split = str_replace($replace_this, '', $my_new_split);
$my_new_split = str_replace('"', '\"', $my_new_split);
?>
<script>
$(document).ready(function() {
$('#add_transaction_row').click(function() {
$(".split_continer").append("<?=$my_new_split;?>");
return false;
});
});
</script>
<hr />
<div class="span-24 last">
<?=form_open('accounts/do_split')?>
<div class="split_continer">
<div class="split_transaction_box">
<div class="span-7"><?=form_input('date[]', '', 'id="' . random_string('numeric', 8) . '" class="datepicker"');?></div>
<div class="span-7"><?=form_dropdown('sub_cat_id[]', $subcategories_options);?></div>
<div class="span-5"><?=form_input('reference[]');?></div>
<div class="span-4 last"><?=form_input('ammount[]');?></div>
<div class="clearfix"></div>
</div><!-- /.split_transaction_box -->
</div><!-- /.split_container -->
<br />
Add new split
<input type="submit" class="button white" value="Save this split" />
<?=form_close()?>

Answer 1

Your exactly right, the datepicker does not work on new elements because you are adding those elements into the page after jquery has attached the datepicker. I've come across this issue myself. I came up with a few ways of doing it.
The first way was to bind a live click handler to the element, check if datepicker is applied, and if not apply it.
http://jsfiddle.net/uyx67/1/
But maybe a better way is to build the elements using jquery as objects and apply the datepicker that way
http://jsfiddle.net/4jmkw/3/
Both ways work, and do the job.

Answer 2

<script>
$(document).ready(function() {
$('#add_transaction_row').click(function() {
var new_row = jQuery("<?=$my_new_split;?>");
$(".split_continer").append(new_row);
$( ".datepicker" ).datepicker({
numberOfMonths: 2,
dateFormat: 'DD, d MM, yy'
});
return false;
});
});
</script>