Question

I have a div that can be filled with 3 different layouts for entering dates and times.

This is the html that gets loaded by one of the layouts:

 <div class="row clearfix input-field">
  <div class="span10 date-selection">
    <div class="input-prepend date-time">
     <input class="date-input" name="date" size="16" type="text" value="">
    </div>
    <div class="input-prepend date-time">
     <input class="time-input" name="time" size="16" type="text" value="">
    </div>
  </div>
 </div>

I then use live to manage the listeners like this

$('.date-input').live 'click', (e) ->
    $(this).datepicker({showOn:'focus'}).focus()
$('.time-input').live 'click', (e) ->
  $(this).timepicker({showOn:'focus'}).focus()

This works fine but I also have a link to create a new set of date and time fields.

$(".add-lesson").live 'click', (e) ->
    e.preventDefault()
    lesson = $('.multiple-lessons .row:first').clone()
    $(".multiple-lessons .row:last").after(lesson)
    $(".multiple-lessons .row:last input.date-input").attr('name', 'date2')
    $(".multiple-lessons .row:last input.date-input").attr('id', 'new-date-id')
    $(".multiple-lessons .row:last input.time-input").attr('name', 'time2')
    $(".multiple-lessons .row:last input.time-input").attr('id', 'new-time-id')

In the final code I will be generating better names that are valid for saving in rails so the names and ids above are just for testing.

THE PROBLEM

The pickers work with the original live elements but not the cloned ones.
Strangely if I don’t use the picker and add loads of new rows using clone all the cloned rows work with the pickers.

I am using the latest jQuery and jQuery ui

Any ideas?

Answer 1

I couldn’t get the solution from @pawar to work so I am using this hack until I find a better solution.

$('.date-input').datepicker('destroy')
$('.date-input').datepicker()