How to target dynamic created form elements

How to target dynamic created form elements

Hi,

Really new to jQuery but getting the hang of it.  I have a form that has a table that adds rows dynamically, 4 columns with each having a form element.  i end up with the following when the page loads, created dynamically:

  1. <tr>
  2. <td><input type="text" name="datepicker0" id="datepicker"></td>
  3. <td><input type="text" name="date_to0" id="datepicker" size="20"></td>
  4. <td><input type="text" name="employer0" id="employer0" size="20"></td>
  5. <td><input type="text" name="position0" id="position0" size="20"></td>
  6. <td><input type="button" value="Delete"></td>
  7. </tr>


for the first cell, I am adding a text box, applying the "datepicker" id as follows

  1. var cell1 = row.insertCell(0);
  2. var el1 = document.createElement('input');
  3. el1.type = 'text';
  4. el1.name = 'datepicker' + iteration;
  5. el1.id = 'datepicker';
  6. cell1.appendChild(el1);


pretty staightforward and it works great.

however, when i try to apply the standard jQuery datepicker to the element in the dynamically created table, im not getting any action after the page loads --

  1. $(function() {
  2. $("#datepicker").datepicker();
  3. $.datepicker.setDefaults($.datepicker.regional['']);
  4. });
       


Any help would be great --

thanks!