jQuery datepicker не работает для нескольких экземпляров

Question

Я пытаюсь создать новый datepicker каждый раз, когда будет выбрано место в Google maps.

  $(function(){$(".datepick").datepicker({ 
       dateFormat : "yyyy-MM-dd" 
       }); 
      }); 

    var tomakedate = document.getElementById("fordate"); 

Это событие, в которое будет добавлен новый datepicker в html.

    selectedplacessize = selectedplaces.length; 
        inputcal = document.createElement("input"); 
        inputcal.type = "text"; 
        inputcal.name = "datepicker" + selectedplacessize; 
        inputcal.setAttribute("id","datepicker" + selectedplacessize); 
        inputcal.className = "datepick hasDatepicker"; 
        tomakedate.appendChild(inputcal); 

В браузере мой html с недавно добавленным datepicker выглядит так.

  <td id="fordate"> <input type="text" id="inputlatlong" name="inputlatlong" hidden=""> 
     <input type="text" id="datepicker" name="datepicker" class="datepick hasDatepicker"> 
     <input type="text" name="datepicker1" id="datepicker1" class="datepick hasDatepicker"></td> 

Элемент ввода с идентификатором # datepicker, будет там, когда страница загружается. Каждый раз, когда на карте Google выбрано место, будет добавлен другой тип ввода с классом «datepick». В контрольном элементе браузера нет ошибок или предупреждений.

Edit: Я попытался заменить строку:

inputcal.className = "datepick hasDatepicker"; с

inputcal.className = "datepick";

Он все еще не работает.

Answer 1

Вы делаете $('.datepick').datepicker();до эти элементы с классом datepick есть. Добавлены новые элементы после эта строка кода будет не быть преобразована в datepickers, поскольку она относится только к элементам, которые удовлетворяют селектору в этот момент.

Аналогия Мне нравится использовать для таких вещей, как это то, что я имею в виду, как универмаге аналогии:

Допустим, вы работаете в универмаге. Ваш менеджер говорит: «Пойдите красную наклейку на все, что есть в отделе игрушек» - и так вы и сделали. На следующий день приходят 100 новых игрушек. Сразу же ваш менеджер подходит к вам и спрашивает: «Почему у новых игрушек нет красных наклеек?»

Это похоже на то, что вы просите здесь. Вы преобразовываете все элементы, которые в настоящее время находятся в .datepick, в datepickers, но по мере того как новые создаются, вы не конвертируете их.

Вы можете изменить свой код, чтобы сделать элементы datepickers, как они созданы, выполнив следующие действия:

selectedplacessize = selectedplaces.length; 
inputcal = document.createElement("input"); 
inputcal.type = "text"; 
inputcal.name = "datepicker" + selectedplacessize; 
inputcal.setAttribute("id","datepicker" + selectedplacessize);  
inputcal.className = "datepick hasDatepicker"; 
tomakedate.appendChild(inputcal); 

$inputcal = $(inputcal); 
$inputcal.datepicker({dateFormat : "yyyy-MM-dd"});