基于用户输入的jQuery多个开始和结束日期

Question

我正在使用一些较旧的代码，正在寻找是否有一种方法可以让用户在文本框中输入数字，并且当单击创建按钮时，它将生成给定的开始和结束数目日期。以下代码大多数情况下都起作用，但是新创建的日期字段不会随日历一起填充。我觉得这是因为页面已经被加载，而我只是将文本附加到已经加载的页面的末尾。有没有解决的办法，可以确定提交时属于哪个代码块的日期是什么？

会根据需要进行更新。

从我可以看到的代码库中使用的是jQuery v1.8和jQuery-ui v1.8，所以它们已经很老了。

例如，如果我输入数字2，我将得到两次以下两次生成的代码。

HTML

       <tr>
        <td class="DisplayFieldName">
            # of dates
        </td>
        <td class="DisplayFieldData" style="padding: 0px 0px 0px 5px;">
            <input type="text" name="numOfDates" id="numOfDates" value="0" />
            <button class="numOfDatesBtn" id="numOfDatesBtn" type="button">Add Dates</button>
        </td>
    </tr>
    <tr>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;" align="right">
            <label>Period</label>
        </th>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;">
            <label>Start</label>
        </th>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;"></th>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;">
            <label>End</label>
        </th>
        <th style="color:Black;background-color:#D1D1D1;padding:5px;"></th>
    </tr>

    <tr>
        <td>User 1: </td>
        <td>@Html.CheckBox("User1", true)</td>
    </tr>
    <tr>
        <td>user 2: </td>
        <td>@Html.CheckBox("User2", true)</td>
    </tr>
    <tr>
        <td><label for="startDate">Start:</label></td>
        <td><input type="text" name="startDate" value="" id="newStartDate" /></td>
    </tr>
    <tr>
        <td><label for="startDate">Buy It Not:</label></td>
        <td><input type="text" name="buyitnow" value="" id="buyItNowDate" /></td>

        <td><input type="text" name="butitnow" value="" id="buyItNowEndDate" /></td>
    </tr>
    <tr>
        <td><label for="endDate">End:</label></td>
        <td></td>
        <td><input type="text" name="endDate" value="" id="newEndDate" /></td>
    </tr>

JavaScrpt / jQuery

$('#newStartDate').datetimepicker({ dateFormat: "m/dd/yy", timeFormat: "h:mmtt" });
$('#buyItNowDate').datetimepicker({ dateFormat: "m/dd/yy", timeFormat: "h:mmtt" });
$('#buyItNowEndDate').datetimepicker({ dateFormat: "m/dd/yy", timeFormat: "h:mmtt" });
$('#newEndDate').datetimepicker({ dateFormat: "m/dd/yy", timeFormat: "h:mmtt" });

$("#numOfDatesBtn").click(function () {
    var num = parseInt($("#numOfDates").val());

    for (var i = 1; i <= num; i++)
    {                             
        $(wrapper).append(fieldHTML3); //Add field html            
    }

});

var fieldHTML3 = '<tr>'+
                    '<td><label for="startDate">Start:</label></td>'+
                    '<td><input type="text" name="startDate" value="" id="newStartDate" /></td>'+
                '</tr>'+
                '<tr>'+
                    '<td><label for="startDate">Buy It Not:</label></td>'+
                    '<td><input type="text" name="buyitnow" value="" id="buyItNowDate" /></td>'+

                    '<td><input type="text" name="butitnow" value="" id="buyItNowEndDate" /></td>'+
                '</tr>'+
                '<tr>'+
                    '<td><label for="endDate">End:</label></td>'+
                    '<td></td>'+
                    '<td><input type="text" name="endDate" value="" id="newEndDate" /></td>'+
                '</tr>'

Answer 1

请考虑以下示例。