Attaching jquery datepicker to injected element

How can i attach datepicker to dynamically injected element?

I cant simply make something like:

$(function(){
  $('.date').datepicker();
})

because after the dom complete loaded, there is no element with class of '.date'

I dont think live() will also work here

I got this error in firebug $(".date").datepicker is not a function

Edit:

This is how the element being injected

$('#typeId').change(function(){
   $(this).nextAll().remove();
   $(this).parent().append('<input type="hidden" name ="view_type" value="by_range"> <span>Start:</span> <input type="text" name="start_date" class="da开发者_StackOverflowte"> <span>End:</span> <input type="text" name="end_date" class="date"> <input type="submit" value="Submit">');
})

Why don't you try and create a callback function that will be called when the dynamically injected element is inserted. The callback could setup the datepicker for the specified selector.

If you know when the element is inserted you can do .datepicker() on it right after that.

Some time ago i made something similar using Duplicate/Remove, a jQuery plugin you can find here: http://www.trovster.com/lab/plugins/duplicate-remove/

Right after the following on line 60 of jquery.duplicate-remove.js:

$(this).find('input').focus();

You can instantiate jQuery datepicker:

$(this).find('.datepicker').datepicker();

And then, just call Duplicate/Remove normally. You'll also need an "initial" instance of datepicker for the first element of the picker.

Live Query did solve my problem

$('.date').livequery(){
  $(this).datepicker()
}

Try modifying your code to this:

$('#typeId').change(function(){
   $(this).nextAll().remove();
   $(this).parent().append($('<input type="hidden" name ="view_type" value="by_range"> <span>Start:</span> <input type="text" name="start_date" class="date"> <span>End:</span> <input type="text" name="end_date" class="date"> <input type="submit" value="Submit">').find('.date').datepicker());
})