0

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

看法

<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%>

查询：

日期选择器

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

        });
});

添加新表格：

$(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);
       });
4

2 回答 2

2

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

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

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

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

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

和

 $(function(){...})

做完全相同的事情，但是您将它们嵌套在一起。我不确定这是否会给您带来问题，但我只会使用其中一个。

请注意，您还可以使用 jQuery.live() 或 jQuery.on()，具体取决于您正在运行的 jQuery 版本。.delegate() 适用于 1.4.3+ 和 .on() 适用于 1.7+

于 2012-05-25T20:05:33.167 回答
0

最简单的方法——在末尾再次调用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。（但您仍然必须使用动态日期选择器解决问题）

于 2012-05-25T18:26:10.423 回答