Javascript 日期选择器仅在第一行工作

我对日期选择器有一个奇怪的问题。他只在动态表的第一行工作

        $(document).ready(function () {
        $(".Data1").datepicker({
            showOn: "button",
            buttonImage: "/calendar.png",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true

        });
    });

这里是我创建新行的Javascript：

 function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for (var i = 0; i < colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                newcell.className = "clastest";
                if (i == 3)  {
                                  newcell.getElementsByTagName("input")[0].id="StartD"+rowCount;
                              }
                              if (i == 4) {
                                  newcell.getElementsByTagName("input")[0].id = "EndD" + rowCount;
                              }
                              if (i == 5)
                              {
                                  newcell.getElementsByTagName("input")[0].id =rowCount;
                              }

            }
        }

这是HTML

            <td>
                @Html.TextBox("Pozition", poz, new { @style = "width:50px;", @id = "Pozition" })
            </td>
            <td>
                @Html.TextArea("Description", des, new { @style = "width:250px; min-height:50px;", @id = "Description" })
            </td>
            <td>
                @Html.TextBox("StartDate", di, new { @class = "Data1", @id = "StartD" })
            </td>
            <td>
                @Html.TextBox("EndDate", de, new { @class = "Data1", @id = "EndD" })
            </td>

---

你知道为什么它只在第一排起作用而不是在所有的排起作用吗

问题在于，您没有将事件添加到新创建的元素中，当您添加datepicker函数时，它只对第一行有效，因为它是在dom准备就绪时创建的，因此每次添加新行时，您都需要再次添加事件

您有两种选择：

按照他们在此处解释的最佳方法进行操作： 或者将日期选择器代码放入非最佳函数中：

---

然后在addRow函数的末尾添加addDatePicker问题在于没有将事件添加到新创建的元素中，当您添加datepicker函数仅对第一行有效时，因为它是dom准备就绪时唯一创建的，所以每次添加新行时，您都需要再次添加事件

您有两种选择：

按照他们在此处解释的最佳方法进行操作： 或者将日期选择器代码放入非最佳函数中：

---

然后在addRow函数的末尾添加addDatePicker

如果我同时打开了两个DataPiker，则它不起作用：基本上，如果我同时打开了两个函数，行为是相同的。但是如果我只有那个函数，它只在我添加第二行逻辑时对第一行起作用。但是我如何为第一行初始化它呢？哦，我明白了，问题是CSS选择器，你在所有输入中都有'clastest'类吗？如果您给我更多的标记，我可以帮助您，比如表的id，如果它有更多的表或者只有一个表；上面是我正在使用的HTML代码和编译的代码：我已经将answer的CSS选择器修改为：.datepicker。您只需将该类添加到所有日期的输入中，即可使日期选择器工作。可能会取消javascript行的注释，并将其从“Clatest”更改为“datepicker”。只需将该类添加到输入中。如果两个DataPiker都打开，则该类不起作用：基本上，如果两个函数都打开，则行为是相同的。但是如果我只有那个函数，它只在我添加第二行逻辑时对第一行起作用。但是我如何为第一行初始化它呢？哦，我明白了，问题是CSS选择器，你在所有输入中都有'clastest'类吗？如果您给我更多的标记，我可以帮助您，比如表的id，如果它有更多的表或者只有一个表；上面是我正在使用的HTML代码和编译的代码：我已经将answer的CSS选择器修改为：.datepicker。您只需将该类添加到所有日期的输入中，即可使日期选择器工作。可能会取消javascript行的注释，并将其从“Clatest”更改为“datepicker”。只需将该类添加到输入中。

function addDatePicker(){
      $(".datepicker").datepicker({
        showOn: "button",
        buttonImage: "/calendar.png",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true
      });
}