jQuery datepicker not working in added div

Question

I have a form (4 inputs) including a jQuery datepicker. It also has a button that adds another div (also via jQuery, same 4 inputs) below so the user can add multiple records.. The datepicker works in the first form but not any subsequent ones...

View

<div id="single_module">
<div class="pitch">
<h2>Step 3: Friends Birthdays</h2>
</div>
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
<%= simple_form_for @user, url: wizard_path do |f| %>

  <div class="inputs">
  <ul class="testss1">
  <%= f.simple_fields_for :friends do |friend_f| %>
    <li>
    <%= friend_f.input :name %>
    </li>
    <li>
    <%= friend_f.input :dob, :as => :date_picker, :label => 'Birthday' %>
    <li>
    <%= friend_f.input :gender, :collection => ['male','female'] %></li>
    </li><li>
    <%= friend_f.association :interests, :as => :select, :label => false %></li>


    <%end%>

    </div>
    <div>
    <input type="button" id="btnAdd" value="add another name" />
    <input type="button" id="btnDel" value="remove name" />
    </div>
    </form>
    <div class="actions">
    <%= f.button :submit, 'Next Step', :class => 'btn btn-primary',  %>
    <br></br>
    </div>
    <%end%>

Jquery:

Datepicker

$(document).ready(function(){
    $(function() {
            $( "#user_friends_attributes_0_dob" ).datepicker();

        });
});

Addnewform:

$(document).ready(function() {
           $('#btnAdd').click(function() {
               var num     = $('.clonedInput').length;
               var newNum  = new Number(num + 1);

               var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

               newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
               $('#input' + num).after(newElem);
              $('#btnDel').attr('disabled',false);

               if (newNum == 5)
                   $('#btnAdd').attr('disabled',true);
           });

           $('#btnDel').click(function() {
               var num = $('.clonedInput').length;

               $('#input' + num).remove();
               $('#btnAdd').attr('disabled',false);

               if (num-1 == 1)
                   $('#btnDel').attr('disabled',true);
           });

           $('#btnDel').attr('disabled',true);
       });

Answer 1

You'll want to 'tell' jQuery to dynamically handle a DOM event for your targeted elements and rebind that datepicker functionality. Start by adding a css class to any of your date picker elements for example "my-datepicker". Then tell the DOM to bind the datepicker functionality on an event (for example: mousenter):

$(function() {
     $("#myForm").delegate('.my-datepicker', 'mouseenter', function(){
        $(this).datepicker();
     });
})

The above will tell the DOM to respond to any mouseenter event for elements with the class 'my-datepicker' that are located inside the element with the ID of "myForm" -- and doing so will add the datepicker functionality to that element.

I also noticed that you have some redundancy in your script, the lines:

 $(document).ready(function(){...})

and

 $(function(){...})

do exactly the same thing, but you have them nested in each other. I'm not sure if that's going to cause you problems or not, but I'd only use one or the other.

Note, you could also use jQuery.live() or jQuery.on() depending on which version of jQuery you are running. .delegate() works for 1.4.3+ and .on() for 1.7+

Answer 2

The easiest way - call again datepicker() to newly created date field in the end of $('#btnAdd').click. Also, there are similar question with a more correct solutions: Why does jQuery UI's datepicker break with a dynamic DOM?.

And you are reinvents the wheel: in your case you can use https://github.com/ryanb/nested_form or https://github.com/nathanvda/cocoon. (but you still have to solve the problem with dynamic datepicker)