Question

当我的页面加载时，我有一行，通过单击添加按钮，它将再添加一行。但是从下面的代码中，日期选择器仅显示第一行而不是动态添加行。如果我删除第2部分＆＃39;代码然后反向将工作。我需要两个。请帮助。

//===========portion 1============
var i = 0;  
$(document).ready(function() {
    $("#add").click(function() {
        i++;

        $(".normal-tble tbody tr:first").clone().find("input,img").each(function() {
            var tempId = $(this).attr("id");
            var name_Attr = $(this).attr("name");
            $(this).attr("id",$(this).attr("id")+"_"+(i))

            if(tempId!='availability' && tempId!='remove') {
                $(this).attr("name",name_Attr.replace('0',i));

                if(tempId=='number') {
                    $(this).on("blur",isValidNumber);
                    $(this).val(0);
                } else {
                    $(this).val('');
                }

                if(tempId=='expectedServiceDate') {
                    $(this).datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0});
                }

            } else if(tempId=='availability') {
                $(this).on("click",checkAvaialability);
            } else if(tempId=='remove') {
                $(this).on("click",onRemove);
            }        

        }).end().appendTo(".normal-tble");

    });
//=======portion 2===============
$('#expectedServiceDate').datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0});
//==============================================================

<table class="normal-tble">
    <thead>
        <tr>                        
            <th scope="col">Number</th>
            <th scope="col">For Service</th>
            <th scope="col">Expected Service Date</th>
            <th scope="col">Comments</th>
            <th scope="col">Check Availability</th>
            <th scope="col">Remove</th>
            <th scope="col"><img src="<c:url value="/resources/images/add2.png"/>" width="18" height="17" id="add"></th>
        </tr>
    </thead>
    <tbody>

        <tr class="second">
            <td style="text-align:center"><form:input path="premiumList[0].number" id="number" class="tfl-02 qtyText"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].forService" id="forService" class="tfl-02"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].expectedServiceDate" id="expectedServiceDate" class="tfl-02" readonly="true"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].comments" id="comments" class="tfl-02"/></td>
            <td style="text-align:center"><img src="<c:url value="/resources/images/view.png"/>" alt="view" id="availability"></td>
            <td style="text-align:center"><img src="<c:url value="/resources/images/remove.png"/>" alt="remove" id ="remove"></td>
            <td></td>

        </tr>

    </tbody>
</table>

Answer 1

那是因为尚未创建元素。要为动态行创建事件，您需要：

$("body").on("focus", ".mydate", function () {
    $(this).datepicker({
        todayBtn: "linked"
    })
});

将datepicker动态添加到文本框中

1 个答案: