I'm adding a TimeEntry to a page where the user can add a row (clone) to a table. The row that is cloned is hidden (display:none). The user clicks a button and javascript is run to clone the row which renames all of the fields and then appends the new row to the table.
<tr id="blankRowShift">
<td>
<input type="text" id="timeStart" name="timeStart" />
</td>
<td>
<input type="text" id="timeEnd" name="timeEnd" />
</td>
<td>
<select id="userLevel">
<option value="0">Please Select One</option>
<option value="2">Admin</option>
<option value="1">Employee</option>
<option value="3">Scheduler</option>
</select>
</td>
</tr>
var r = $("#tbl #blankRowShift").clone().removeAttr("id");
$("#timeStart", r).attr("name", "timeStart" + nn).attr("id", "timeStart" + nn);
$("#timeEnd", r).attr("name", "timeEnd" + nn).attr("id", "timeEnd" + nn);
$("#userLevel option:nth(0)", r).attr("selected", "selected");
$("#userLevel", r).attr("name", "userLevel" + nn).attr("id", "userLevel" + nn).attr("value", 0);
$("#tbl").append(r);
$("#timeStart" + nn).timeEntry({
show24Hours: false,
showSeconds: false,
timeSteps: [1, 15, 0],
spinnerImage: 'includes/js/spinnerOrange.png',
beforeShow: customRangeStart
});
$("#timeStart" + nn).timeEntry('setTime', new Date());
$("#timeEnd" + nn).timeEntry({
show24Hours: false,
showSeconds: false,
timeSteps: [1, 15, 0],
spinnerImage: 'includes/js/spinnerOrange.png',
beforeShow: customRangeEnd
});
$("#timeEnd" + nn).timeEntry('setTime', new Date());
The spinner works just fine and the times can be changed.
Then when submitting the form, I validate the time. The getTime errors in jQuery with the message "elem is undefined var id = elem[ expando ];". I've placed the statement 'console.dir(input)' in the _getTimeTimeEntry: function and it returns nothing for the cloned fields.
el = $("#timeStart" + i);
if (el.timeEntry("getTime") == null) {
