jQuery datepicker가 추가 된 div에서 작동하지 않습니다.

Question

jQuery datepicker를 포함한 양식 (4 개 입력)이 있습니다. 또한 사용자가 날짜 선택기가 첫 번째 양식에서 작동 여러 레코드 ..하지만 후속을 추가 할 수 있도록 아래 (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%> 

JQUERY :

:

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

     }); 
}); 

Addnewform

날짜 선택기

Answer 1

jQuery를 사용하여 대상 요소에 대한 DOM 이벤트를 동적으로 처리하고 해당 datepicker 기능을 리 바인드해야합니다. 먼저 "my-datepicker"와 같은 날짜 선택 도구 요소에 css 클래스를 추가합니다.

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

위입니다 '내-날짜 선택기'클래스와 요소에 대해 어떤 mouseenter 이벤트에 응답 할 DOM을 말할 것이다 : 다음 (: mousenter 예를 들어) 이벤트에 날짜 선택기 기능을 결합하기 위해 DOM에게 ID가 "myForm"인 요소 내부에 위치하며 그렇게하면 해당 요소에 datepicker 기능이 추가됩니다.

나는 또한 당신이 당신의 스크립트에서 일부 중복이 나타났습니다, 라인 :

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

및

$(function(){...}) 

정확히 같은 일을

,하지만 당신이 그 (것)들을 서로 중첩있다. 그게 당신에게 문제가되는지 아닌지는 잘 모르겠지만, 나는 하나만 사용하고 싶습니다.

참고 : 실행중인 jQuery 버전에 따라 jQuery.live() 또는 jQuery.on()을 사용할 수도 있습니다. .delegate()는 링크가 $ ('. 날짜')가 아님을 나타 내기 위해 1.4 이상에서 1.4.3+ 및 .on() 1.7+에 대해

Answer 2

가장 쉬운 방법은 새로 작성한 날짜 입력란에 datepicker()을 다시 호출하여 $('#btnAdd').click의 끝에 입력하십시오. 또한 더 정확한 해결책 인 비슷한 질문이 있습니다 : Why does jQuery UI's datepicker break with a dynamic DOM?.

당신은 바퀴를 reinvents 있습니다 : 귀하의 경우에는 https://github.com/ryanb/nested_form 또는 https://github.com/nathanvda/cocoon 사용할 수 있습니다. (하지만 여전히 동적 인 datepicker로 문제를 해결해야합니다.)