jQuery onclick event is not binding to new DOM element
I am integrating jdPicker (
http://jdpicker.paulds.fr/?p=demo) which is anjQuery Date picker into my jsp as follows:
Supplier.jsp
<html>
<script type="text/javascript">
$('#calenderOpener').jdPicker({
date_format:"dd/mm/YYYY",
select_week:1,
show_week:1,
date_min:"19/05/2010",
date_max:"21/12/2050"
});
</script>
.....
<td><input type="text" id="calenderOpener" name="<%= expDateID %>" class="jdpicker"/> </td>
<td><input type="text" id="calenderOpener" name="<%= mnfDate %>" class="jdpicker"/></td>
.....
</html>
It woks perfectly. However, when I create the above two DOM <input> elements dynamically using js as follows:
supplier.js
newcell = row.insertCell(4);
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', drug_id+"_expDate");
input.setAttribute('id', 'calenderOpener');
input.setAttribute('class', 'jdpicker');
newcell.appendChild(input);
newcell = row.insertCell(5);
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', drug_id+"_mnfDate");
input.setAttribute('id', "calenderOpener");
input.setAttribute('class', 'jdpicker');
newcell.appendChild(input);
The date picker can not be pop up (not working). It may be issue of
jQuery function not binding to newly added dom elements.
Please let me know how I can solve it.