jQuery datePicker不适用于多个实例

Question

我每次选择Google Maps中的位置时都在尝试创建新的datepicker。

           $(function(){$(".datepick").datepicker({
              dateFormat : "yyyy-MM-dd"
              }); 
           });
  var tomakedate = document.getElementById("fordate");

这是将在html中添加新datepicker的事件。

                    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>

带有ID＃datePicker的输入元素，页面加载时将在那里。每次在Google Maps上选择一个地方时，都会添加带有" datePick"类的另一个输入类型。浏览器的检查元素中没有错误或警告。

编辑：我尝试更换行：

inputcal.classname =" datepick hasdatepicker";用

inputcal.classname =" datepick";

它仍然不起作用。

Answer 1

您在存在这些元素之前使用$('.datepick').datepicker(); 进行CC_1 。在之后添加的新元素将将代码行 not 转换为datePickers，因为它仅指在该瞬间满足selector 的元素。

我喜欢用于这样的类比，我称之为百货商店类比：

假设您在百货商店工作。您的经理说："去玩具部门的所有内容上都要红色贴纸" - 这样就可以了。第二天，有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"});