Question

我有一个表单（4个输入），包括一个jQuery datepicker。它还有一个按钮，在下面添加另一个div（也通过jQuery，相同的4个输入），这样用户就可以添加多个记录.. datepicker工作在第一种形式，但不是任何后续的...

查看

<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的：

日期选择器

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

您需要'告诉'jQuery动态处理目标元素的DOM事件并重新绑定该datepicker功能。首先将css类添加到任何日期选择器元素，例如“my-datepicker”。然后告诉DOM在事件上绑定datepicker功能（例如：mousenter）：

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

上面将告诉DOM响应任何具有类'my-datepicker'的元素的mouseenter事件，这些元素位于ID为“myForm”的元素内 - 并且这样做会将datepicker功能添加到该元素元件。

我还注意到你的脚本有一些冗余，行：

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

和

 $(function(){...})

做同样的事情，但你把它们互相嵌套。我不确定这是否会导致你的问题，但我只会使用其中一个。

注意，您也可以使用jQuery.live（）或jQuery.on（），具体取决于您运行的jQuery版本。 .delegate（）适用于1.4.3 +和.on（）适用于1.7 +

Answer 2

最简单的方法 - 在datepicker()的末尾再次调用$('#btnAdd').click到新创建的日期字段。此外，还有类似的问题与更正确的解决方案：Why does jQuery UI's datepicker break with a dynamic DOM?。

你重新发明轮子：在你的情况下，你可以使用https://github.com/ryanb/nested_form或https://github.com/nathanvda/cocoon。（但你还是要用动态的datepicker解决问题）

jQuery datepicker无法在添加的div中工作

2 个答案: