动态添加jquery ui datepicker样式中断? [英] adding jquery ui datepicker dynamically style break?

问题描述

在动态添加时间jquery ui datepicker之前阅读此内容? 我在添加新行后，JQ datepicker UI的样式会中断，这是有问题的！以前有没有人遇到过这个问题.请参阅照片，以获取有关错误的更多详细信息，该错误来自datepicker UI

read this before adding time jquery ui datepicker dynamically? I have problem the JQ datepicker UI the style will break up after I add new row! did anyone had this Problem before. see the photo for more detail of the bugs the number are from 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>

推荐答案

此问题是由于以下原因引起的: 当您将tr克隆到另一个jquery添加到您的输入中的css类:hasdatepicker时，您可以在页面的源代码上对此进行验证，您会发现:

this problem is due to the following : when you clone your tr there an other css class that jquery added to your that input : hasdatepicker, you can verfify this on the source of your page, you'l find this:

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

这在这里得到了很好的解释:

this is well explained here :

jQuery DatePicker不适用于新添加的行

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

what i suggest to you is not to clone your tr but to add html code with jquery also i think your code can be more simplified , tell me exaclty what you want to i may help you

这篇关于动态添加jquery ui datepicker样式中断?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！