jQuery - datepicker fails to activate on element inserted after page load

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?

I thought live() was gone from the latest jQ, use on() instead. — 472084
– 472084, Commented Feb 29, 2012 at 16:19
Thanks, I swapped it over to .on but now the picker doesnt work when you add the cloned inputs then use the pickers — Alex
– Alex, Commented Feb 29, 2012 at 16:47

Abhijeet Pawar · Accepted Answer · 2012-02-29 16:52:06Z

1

There is overloaded version of clone which goes like -

.clone( [withDataAndEvents] [, deepWithDataAndEvents] )

You can bind events normally with .bind() as,

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

and then use .clone(true, true) as,

lesson = $('.multiple-lessons .row:first').clone(true, true)

I think this will solve the issue.

edited Feb 29, 2012 at 16:52

answered Feb 29, 2012 at 16:44

Abhijeet Pawar

6901 gold badge6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

Thanks, when I try to open a cloned picker it opens the original input picker?

Abhijeet Pawar Over a year ago

In that case, directly binding the datepicker/timpicker would help -- $('.date-input').datepicker({showOn:'focus'}).focus()

Abhijeet Pawar · Accepted Answer · 2012-03-02 14:58:34Z

Below is the fully working solution:

    $(function(){
    var counter = 0;
        $(".add-lesson").live( 'click', function (e) {
            e.preventDefault()
            lesson = $('.multiple-lessons .row:first').clone(false, false);

            $("input.date-input",lesson).attr('name', 'date2'+counter);
            $("input.date-input",lesson).attr('id', 'new-date-id'+counter);
            $("input.time-input",lesson).attr('name', 'time2'+counter);
            $("input.time-input",lesson).attr('id', 'new-time-id'+counter);
            $(".multiple-lessons .row:last").after(lesson);
            $('.multiple-lessons .row:last #new-date-id'+counter)
                .datepicker({showOn:'focus'});
            $('.multiple-lessons .row:last #new-time-id'+counter)
                .timepicker({showOn:'focus'});
            counter++;
        });

        $('.date-input').click(function(){
            $(this).datepicker({showOn:'focus'});
        });
        $('.time-input').click(function(){
            $(this).timepicker({showOn:'focus'});
        });

    });

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

Alex · Accepted Answer · 2012-03-03 11:45:01Z

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()

edited Mar 3, 2012 at 11:45

answered Mar 1, 2012 at 21:35

Alex

6,4957 gold badges45 silver badges54 bronze badges

Comments

Francois Gelinas · Accepted Answer · 2012-03-03 18:10:53Z

0

When the datepicker is attached to an input, a special class "hasDatepicker" is added to the input to tell the plugin that this input already has a datepicker attached to it. Remove the class from the cloned inputs and then datepicker will correctly bind to them when called.

Something like :

lesson = $('.multiple-lessons .row:first').clone().removeClass('hasDatepicker');

edited Mar 3, 2012 at 18:10

answered Mar 3, 2012 at 3:25

Francois Gelinas

6116 silver badges5 bronze badges

Collectives™ on Stack Overflow

jQuery - datepicker fails to activate on element inserted after page load

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related