Adding numeric validation to dynamic field
I am trying to add numeric validation to a field that I generate once a button is clicked. The code is:
function addFormField()
{
var id = document.getElementById("id").value;
$("#appendTable").append(
"<div>"+
"<table width='820' border='0' cellspacing='0' cellpadding='5' align='left' style='margin-top:10px;margin-bottom:10px;margin-left:-2px;clear:both;'>"+
"<tr>"+
"<td class='label'>ENTER DEALER NAME</td>"+
"<td class='label'><div style='margin-left:-8px;'>ENTER DEALER INVOICE NUMBER</div></td>"+
"<td class='label'><div style='margin-left:-8px;'>ENTER DEALER INVOICE TOTAL</div></td>"+
"<td class='label'><div style='margin-left:-80px;'>UPLOAD FILE</div></td>"+
"</tr>"+
"<tr>"+
"<td><input name='dealerName["+id+"]' class='field required' type='text' value='' onFocus='doClear(this)' /></td>"+
"<td><input name='dealerInvoiceNum["+id+"]' class='field required' type='text' value='' onFocus='doClear(this)' /></td>"+
"<td><input name='dealerInvoiceAmt["+id+"]' id='dealerInvoiceAmt_"+id+"' class='field required' type='text' value='' onFocus='doClear(this)' /></td>"+
"<td><input name='uploadInvoice["+id+"]' class='inputBrowse required' value='' type='file' style='width:255px;' /></td>"+
"</tr>"+
"</table>"+
"<input type='button' onclick='deleteParentElement(this)' style='margin-top:-20px;' value='⇑ Remove this Dealer' class='remove' />"+
"</div>");
jQuery(function($)
{
$("#dealerInvoiceAmt_"+id).numeric({allow:"."});
});
}
addFormField is called on the onclick event. I am getting an error as follows:
$("#dealerInvoiceAmt_" + id).numeric is not a function
I have been pulling my hair out trying to figure out why this is happening, any help is appreciated.