1

日付ピッカーに奇妙な問題があります。彼は動的テーブルの最初の行でのみ作業します。

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

すべてではなく最初の行でのみ機能する理由はありますか？

4

1 に答える 1

4

問題は、新しく作成された要素にイベントを追加していないことです。datepicker関数を追加すると、最初の行でのみ機能します。これは、domの準備ができたときにのみ作成されるため、イベントを再度追加する必要があります。新しい行を追加するたびに。

2つのオプションがあります：

  1. 彼らがここで説明している最適なものは何ですか： 動的に作成された要素のイベントバインディング？
  2. または、日付ピッカーコードを関数に入れます（最適ではありません）：
function addDatePicker(){
      $(".datepicker").datepicker({
        showOn: "button",
        buttonImage: "/calendar.png",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true
      });
}

次に、関数addDatePicker()の最後に追加しますaddRow()

于 2012-09-06T13:54:24.333 に答える