jquery assign plugin to dynamic created object

Question

Hi All,

I have this script

<input type="Button" class="button-calendar" value="add">
<ol class="ol-calendar">
    <li><input type="Text" class="text-calendar" name="calendar_1" id="calendar_1"></li>
</ol>

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/smoothness/jquery-ui-1.8.2.custom.css">

<script>
$(document).ready( function() {
    $('.text-calendar').datepicker();

    $('.button-calendar').click( function() {
        $('.ol-calendar')
            .append('<li></li>');

        $('.ol-calendar')
            .children(':last')
            .append('<input type="Text" class="text-calendar" name="calendar_' + $('.ol-calendar').children().length + '" id="calendar_' + $('.ol-calendar').children().length + '"');

        $('.ol-calendar')
            .children(':last')
            .children('.text-calendar')
            .datepicker();
    });
});
</script>

see that .datepicker(). for the 1st text-calendar, it's easy to assign it to .datepicker(), but for 2nd and so on, I need to assign a .datepicker() again when it's a dynamic created object

can I assign the .datepicker() only one time? maybe it's like .live() when we deal with event

thank you

Update got the answer, I use livequery

so the script is

$('.text-calendar').livequery( function() {
    $(this).datepicker();
});

Answer 1

Try this:

$('.text-calendar:not(.hasDatepicker)').live('focus', function(){
    $(this).datepicker();
});