日期選取器僅適用於第一行

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準備好了，你需要每次添加新行時再次添加事件。

你有2種選擇：

1. 做什麼，他們在這裏解釋一下這是最理想的： Event binding on dynamically created elements?
2. 或將日期選擇器代碼的函數（不是最優）：

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

然後添加addDatePicker()在addRow()函數的結尾