jQuery datepicker不工作在添加分區

我有一個表單（4個輸入），包括一個jQuery datepicker。它也有一個按鈕，增加了下面這樣用戶可以添加多個記錄。該日期選擇在第一種形式的作品，但沒有任何後續各個另一格（也可通過jQuery的，相同的4個輸入）...jQuery 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); 
     });

來源

2012-05-25 js111

你會'告訴'jQuery爲你的目標元素動態地處理DOM事件並重新綁定日期選擇器功能。首先添加一個css類到任何日期選擇器元素，例如「my-datepicker」。然後告訴DOM結合上一個事件的日期選擇器功能（例如：mousenter）：

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

上面將告訴DOM對任何MouseEnter事件作出響應，用於與類「我的-日期選擇」是元素位於ID爲「myForm」的元素中 - 並且這樣做會將datepicker功能添加到該元素。

我也注意到，你有一些冗餘的腳本，該行：

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

和

$(function(){...})

做同樣的事情，但你讓他們互相嵌套。我不確定這是否會導致您的問題，但我只能使用其中一種。

請注意，您也可以使用jQuery.live（）或jQuery.on（），具體取決於您正在運行的jQuery版本。 .delegate（）適用於1.4+和.on（）1.7+以上

來源

2012-05-25 20:05:33 miked

最簡單的方法 - 再次調用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-25 18:26:10

因此鏈接表示添加$（'。date'）。not（'。hasDatePicker'）。datepicker（）; $（'＃btnAdd'）後點擊但似乎沒有伎倆.. – js111

jQuery datepicker不工作在添加分區

回答

相關問題