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

Question

안녕하세요 저는 div에서 datepicker를 보여주고 싶지만 첫 번째 load div에서만 영향을줍니다. div를 추가하려고하면 div가 datepicker가 작동하지 않습니다.

여기 내 코드입니다. 여기

$("body").on("focus", ".datepickers", function() { 
    var $context = $(this).parents('.entry_day_plan'); 
    $($(this), $context).datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/yy", 
     minDate: 0, 
     onSelect: function(selectedDate) { 
      //$("#cal4").datepicker("setDate", selectedDate); 
     } 
    }); 
}); 
$(function() { 
    $("body").on('click', '.btn-add', function(e) { 
     e.preventDefault(); 
     var controlForm = $('.controls_day_plan:first'), 
      currentEntry = $(this).parents('.entry_day_plan:first'), 
      newEntry = $(currentEntry.clone()).appendTo(controlForm); 
     newEntry.find('input').val('hello'); 
     controlForm.find('.entry_day_plan:not(:last) .btn-add').removeClass('btn-add').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<span class="glyphicon glyphicon-minus"></span>'); 
     newEntry.find(".datepickers").removeClass('hasDatepicker'); 
    }).on('click', '.btn-remove', function(e) { 
     $(this).parents('.entry_day_plan:first').remove(); 
     e.preventDefault(); 
     return false; 
    }); 
}); 

및

는

<div class="panel-body dayplan"> 
    <!--Day Plan--> 

    <div class="control-group" id="fields"> 
     <label class="control-label" for="field1">Please add Day Plan </label> 
     <div class="controls_day_plan"> 
      <div class="entry_day_plan input-group col-sm-12 col-xs-12 "> 
       <div class="form-group col-sm-2 col-xs-12"> 
        <label for="exampleInputnumber"> Excursion Name </label> 
        <input type="text" name="itnryname[]" class=" form-control form_line_only" placeholder="EXCURSIONS NAME"> 
       </div> 
       <div class="form-group col-sm-2 col-xs-12"> 
        <label for="exampleInputnumber"> Insert Dates </label> 
        <input type="text" name="itndate[]" class="datepickers form-control form_line_only dateit" placeholder="DD/MM/YYYY"> 
       </div> 
       <div class="form-group col-sm-2 col-xs-12"> 
        <label for="exampleInputnumber"> Insert Day </label> 
        <select name="itnday[]" class="form_line_only form-control "> 
         <option>Monday</option> 
         <option>Tuesday</option> 
         <option>Wednesday</option> 
         <option>Thursday</option> 
         <option>Friday</option> 
         <option>Saturday</option> 
         <option>Sunday</option> 
        </select> 
       </div> 
       <div class="form-group col-sm-2 col-xs-12"> 
        <label for="exampleInputnumber"> Pickup From </label> 
        <input type="text" name="itnpickfrom[]" class=" form-control form_line_only" placeholder="HOTEL"> 
       </div> 
       <div class="form-group col-sm-2 col-xs-12"> 
        <label for="exampleInputnumber"> Pickup Time </label> 
        <input type="text" name="itnpick[]" class="time timepiker form-control form_line_only" placeholder="6:30 AM"> 
       </div> 
       <div class="form-group col-sm-1 col-xs-12"> 
        <label for="exampleInputnumber"> Dropoff </label> 
        <input type="text" name="itndrop[]" class="time timepiker form-control form_line_only" placeholder="7:00 PM"> 
       </div> 

       <span class="input-group-btn day_plan pull-left"> 
        <button class="btn btn-success btn-add add_col" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> 
       </span> 
      </div> 

     </div> 
    </div> 
    <br> 
    <small>(Press <span class="glyphicon glyphicon-plus gs"></span> to add another Day Plan)</small> </div> 

사람은 내가 날짜 선택기를 추가하고 값 이온 추가 사업부를 얼마나 말해 줄 수 ... html로 코드입니다.

이미 첫 번째 부하 사업부에서 작동하지만 추가 DIV 입력에 작동하지 않습니다는 ... 모든 추가 입력은 내가 잘못하고 오전 같은 class..anything이? 저를 제안 해주십시오 .. 여기

가 jsfiidle입니다 demo

감사

Answer 1

이 pen

var datePickerOption = { 
    showOtherMonths: true, 
    selectOtherMonths: true, 
    dateFormat: "dd/mm/yy", 
    minDate: 0, 
    onSelect: function(selectedDate) {} 
} 

$("body").on("focus", ".datepickers", function() { 
    var $context = $(this).parents('.entry_day_plan'); 
    $($(this), $context).datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/yy", 
     minDate: 0, 
     onSelect: function(selectedDate) {} 
    }); 
}); 

var count = 0; 
$(function() { 
    $("body").on('click', '.btn-add', function(e) { 
     e.preventDefault(); 
     count++; 
     var controlForm = $('.controls_day_plan:first'), 
      currentEntry = $(this).parents('.entry_day_plan:first'), 
      newEntry = $(currentEntry.clone()).appendTo(controlForm); 

     newEntry.find('input.datepickers').val('').attr('id', 'input_' + count).datepicker(datePickerOption); 
     controlForm.find('.entry_day_plan:not(:last) .btn-add') 
      .removeClass('btn-add').addClass('btn-remove') 
      .removeClass('btn-success').addClass('btn-danger') 
      .html('<span class="glyphicon glyphicon-minus"></span>'); 
     newEntry.find(".datepickers").removeClass('hasDatepicker'); 


    }).on('click', '.btn-remove', function(e){ 
      $(this).parents('.entry_day_plan:first').remove(); 
      e.preventDefault(); 
      return false; 
    }); 
});