2013-09-26 2 views
3

У меня есть очень простой настройки Datepicker:JQuery DatePicker не работает на созданном элементе

это в <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<link rel="stylesheet" media="screen,projection,tv" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script> 
    $(function() { 
     $('input.date').datepicker(); 

     $('button').on('click', function() { 
      $('#orig').clone() 
       .attr('id', 'else') 
       .datepicker() 
       .appendTo('body'); 
     }); 
    }); 
</script> 

И это в <body>

<input type="date" id="orig" class="date"> 
<button>duplicate</button> 

Когда вход клонируют DatePicker не инициализируется в теме. См. На http://jsfiddle.net/aMPB2/

Что в этом плохого?

+1

Я был уверен ** ** что реверсирование '' datepicker' и appendTo' вызовов будет исправить его. Это не так. :-) –

+1

Я тоже пробовал это, @TJCrowder –

+0

Я тоже это пробовал :) и многие другие комбинации, но удаление класса вообще не пришло мне в голову –

ответ

8

datepicker добавляет класс маркера "hasDatepicker" к элементу. Вы должны удалить его из клона:

Updated Fiddle

$(function() { 
    $('input.date').datepicker(); 

    $('button').on('click', function() { 
     var x = $('#orig').clone() 
     .attr('id', 'else') 
     .removeClass("hasDatepicker") // <=== New line 
     .appendTo('body') 
     .datepicker(); 
    }); 
}); 
+0

Как я туда попал: Мое первое предположение было чем-то установленным через функция 'data', но ничего не было. Итак, я щелкнул правой кнопкой мыши исходный элемент в Chrome и выбрал «Inspect element», и появился класс ... –

+0

О, я должен был спросить раньше, поэтому мне не нужно тратить час на это! Спасибо! –

Смежные вопросы