Question

I’m using this jQuery function with jQuery UI to generate a datepicker when the user hits one textfield:

<script>
        $(function() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });
  </script>

As you can see it respond to the textfields from and to. The textfields are in my html code like:

<div class="clearfix">
            <label for="from">From</label>
            <input type="text" id="from" name="from" class="xlarge"/>
        </div>
        <div class="clearfix">
            <label for="to">to</label>

At this point everything works. Later, in the same form a let the user to clone this form elements using this other code:

  $(document).ready(function() {
    var removeButton = '<a href="#" id="remove">remove</a>';
        $('#addl').click(function() {
        $('div.jobitems:last').after($('div.jobitems:first').clone());
        $('div.jobitems:last').append(removeButton);
         $('div.jobitems:last input').each(function(){
           this.value = ''; 
        });

    });
    $('#remove').live('click', function() {
        $(this).closest('div.jobitems').remove();
    });
  });
                <input type="text" id="to" name="to" class="xlarge"/>
            </div>

When the user clone the elements, the new ones do not respond to the function that generates the datepicker. I’m really confused about this. Here you can check the running code: http://domingo.net46.net/example/reg.php

Answer 1

You have to call the function that make the datapicker happen again after the append of the html elements so that the datepicker work on them because i can see that the datepicker function is called on the document ready and you have another function that append html element so you have to call the datepicker function right after you append the html elemnt.

$(DoAction);

function DoAction() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    }




$(document).ready(function() {
    var removeButton = '<a href="#" id="remove">remove</a>';
        $('#addl').click(function() {
        $('div.jobitems:last').after($('div.jobitems:first').clone());
        $('div.jobitems:last').append(removeButton);
         $('div.jobitems:last input').each(function(){
           this.value = ''; 
        });
            DoAction();

    });
    $('#remove').live('click', function() {
        $(this).closest('div.jobitems').remove();
    });
  });