javascript - 日期选择器仅适用于第一行

Question

我在使用日期选择器时遇到了一个奇怪的问题。他只处理动态表的第一行。

        $(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>

知道为什么它只对第一行有效而不对所有行有效吗？

Answer 1

问题是你没有将事件添加到新创建的元素，当你添加 datepicker 函数时只适用于第一行，因为它是唯一在 dom 准备好时创建的，你需要添加每次添加新行时都会再次发生该事件。

你有两个选择:

1. 按照他们在此处解释的最佳方式进行操作: Event binding on dynamically created elements?
2. 或者将日期选择器代码放在一个函数中(不是最优的):

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

然后在addRow()函数末尾添加addDatePicker()