Question

在adding time jquery ui datepicker dynamically?之前阅读此内容我有问题JQ datepicker UI在添加新行后样式会分解！之前有没有人遇到这个问题。有关这些错误的详细信息，请参阅照片，该数字来自datepicker UI

enter image description here

 <form>
  <table>
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Start Time</th>
        <th scope="col">End Time</th>
        <th scope="col">Hour Type</th>

      </tr>
    </thead>

    <tbody>
      <tr>
        <td><input name="date1" id="date1" class="date"></td>
        <td><input name="startTime1" id="startTime1"></td>
         <td><input name="endTime1" id="EndTime1"></td>
        <td>
          <select name="hourType1" id="hourType1">
            <option value="">Please select</option>
            <option value="1">Regular</option>
            <option value="2">Overtime</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
  <button>Add Row</button>
    </asp:Content>
</form>

        <script>
        $(document).ready(function($)
        {
        $(".date").datepicker();
            // trigger event when button is clicked
            $("button").click(function()
            {
                // add new row to table using addTableRow function
                addTableRow($("table"));

                // prevent button redirecting to new page
                return false;
            });

            // function to add a new row to a table by cloning the last row and 
            // incrementing the name and id values by 1 to make them unique
            function addTableRow(table)
            {
                // clone the last row in the table
                var $tr = $(table).find("tbody tr:last").clone();
                // get the name attribute for the input and select fields
                $tr.find("input,select").attr("name", function()
                {
                    // break the field name and it's number into two parts
                    var parts = this.id.match(/(\D+)(\d+)$/);
                    // create a unique name for the new field by incrementing
                    // the number for the previous field by 1
                    return parts[1] + ++parts[2];
                // repeat for id attributes
                }).attr("id", function(){
                    var parts = this.id.match(/(\D+)(\d+)$/);
                    return parts[1] + ++parts[2];
                });
                // append the new row to the table
                $(table).find("tbody tr:last").after($tr);
            };
        });
        </script>       
    </body>

Answer 1

此问题是由于以下原因：当你克隆你的tr时，jquery添加到你的输入中的另一个css类：hasdatepicker，你可以在页面的源代码上验证这一点，你会发现：

<input name="date1" id="date1" class="date hasDatepicker">

这里有很好的解释：

jQuery DatePicker not working on newly added row

我建议你不要克隆你的tr，而是用jquery添加html代码另外我认为你的代码可以更简化，告诉我你想要什么，我可以帮助你

Answer 2

当输入元素的ID相同时，这就是Datepicker脚本的标准行为。所以我建议你分配唯一的ID（比如带随机数的ID）因此不会发生冲突。

Answer 3

我建议你一个简单的解决方案：当你点击按钮时你将按照以下步骤删除由jquery：hasDatepicker添加的第二个类，然后再次调用datepicker：

$(".date").removeClass("hasDatepicker");
                    $(".date").datepicker();

试试这个demo

添加jquery ui datepicker动态样式中断？

3 个答案: