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准备就绪时创建的，你需要添加每次添加新行时都会再次显示该事件。

您有两个选择：

做他们在这里解释的最佳方法： Event binding on dynamically created elements?
或者将datepicker代码放在一个函数中（非最佳）：

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

然后在addDatePicker()函数

addRow()

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

1 个答案: