在jquery

Question

我在点击.add课程时生成行。因此当我生成3行时，我开始为datepicker中的第一行添加数据。它让我添加日期。

  

但是当我去设置第二行的日期时，鼠标会将我带到第一个fromdate文本控件。

{p>同样的事情也发生在todate上。即使我生成不同的ID;每行的s仍然无法添加第二行和第三行的日期。

以下是我的HTML

<tr>
                            <td>
                                <div class="row noPadding vendorForm">
                                    <div class="vendorDaterow">
                                        <div class="vendorName" id="dvVendorNameData">
                                            <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
                                        </div>
                                        <div class="vendorFromDate">
                                            <label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate1" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                        <div class="vendorToDate">
                                            <label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate1" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                    </div>
                                    <i class="max">(Maximum 5 Vendors)</i>
                                </div>
                            </td>
                        </tr>

以下是我生成的HTML fiddle

请建议我错在哪里，我无法为第二行和第三行添加日期

Answer 1

检查此代码，它将为克隆元素工作datepicker，在将克隆元素添加到tr并应用$（＆＃39; .dateClass＆＃39;）后，将dateDicker类删除为hasdatepicker类.datepicker（{dateFormat：＆＃34; m / d / yy＆＃34;}）;所以datepicker正常工作

＆＃13;

＆＃13;

$('.dateClass').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "m/d/yy"
});
    $(document).ready(function () {
    var toAddCloneCount = 2;

    $('.add').on('click', function () {
        var $tr = $(this).closest('tr');
        var $tr2 = $tr.clone(true, true);
        $tr2.find(".vendorName").children('label').remove();
        $tr2.find(".add").children().remove();
        $tr2.find(".vendorFromDate").children('label').remove();
        $tr2.find(".vendorToDate").children('label').remove();
        $tr2.find('#txtVendorName').prop('id', 'txtVendorName' + toAddCloneCount);
        $tr2.find('#spFromDate1').prop('id', 'spFromDate' + toAddCloneCount);
        $tr2.find('#spToDate1').prop('id', 'spToDate' + toAddCloneCount++);
               
        $tr2.insertAfter($tr);
         $('.dateClass').removeClass('hasDatepicker').datepicker();
    });
       });

＆＃13;

#ui-datepicker-div { font-size: 12px; } 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<table>
<tr>
                                <td>
                                    <div class="row noPadding vendorForm">
                                        <div class="vendorDaterow">
                                            <div class="vendorName" id="dvVendorNameData">
                                                <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName"></span>
                                            </div>
                                            <div class="vendorFromDate">
                                                <label>From Date</label><span class="datepicker"><input type="text" name="spFromDate1" id="spFromDate1" class="dateClass "><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                            </div>
                                            <div class="vendorToDate">
                                                <label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate1" class="dateClass "><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                            </div>
                                        </div>
                                        <div class="add">
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                        </div>
                                        <i class="max">(Maximum 5 Vendors)</i>

                                    </div>
                                </td>
                            </tr>
</table>

＆＃13;

＆＃13;

＆＃13;