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

【问题标题】：adding jquery ui datepicker dynamically style break?添加jquery ui datepicker动态样式中断？
【发布时间】：2012-08-31 20:33:10
【问题描述】：

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

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

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

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

这里有很好的解释：

jQuery DatePicker not working on newly added row

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

【讨论】：

我正在尝试创建时间表电子表格，但首先我必须修复 UI
是的，但我会打破 Jquery UI Datepicker 样式尝试此操作 1-单击添加新行，单击文本框以选择日期最后单击新行，您将看到它破坏了 UI 样式跨度>
在你的 jQuery 代码 addTableRow($("table"));
当你添加它时它会工作，但问题是它工作了两次，第三次它坏了！

【解决方案2】：

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

【讨论】：

【解决方案3】：

我向您提出一个简单的解决方案：您将在单击按钮时执行以下操作，您将删除 jquery 添加的第二个类：hasDatepicker，然后再次调用 datepicker：

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

试试这个demo

【讨论】：