jqueryUI datepicker on a Javascript created field

Question

I am working with Javascript and based of a radio select it changes the fields in a form. The fields are generated with the Javascript. That part is operating very nicely however one of the fields is also a date that I am trying to use the jQueryUI datepicker with. For some reason it is not running the Javascript on a Javascript created field. I'm not sure if it is my order the scripts are in or what but any help would be appreciated. Here is a JSFiddle with the code I am using. It isn't running because I don't have all of the dependencies linked but you get an overview of how I have it set up. I can put more time putting in the dependencies if you feel it's needed or a link to my page.

* I was playing around with it and noticed that when I initially click on the date select it doesn't do anything but when I click another field and go back to it, it then works?

Right now I am focusing on the field that becomes available in the javascript when Pick up is selected which is on line 22 of the Javascript.

Thanks guys!

http://jsfiddle.net/hn9Qe/

Javascript

function show(x)
{
  var element=document.getElementById(x.id);
  if(element.id=='a')
  {
        var table = document.getElementById("myTable");
        var length = table.rows.length;
        if(length > 9)
        {
            var del1 = table.deleteRow(5);
            var del2 = table.deleteRow(5);
            var del3 = table.deleteRow(5);
        }
        var row = table.insertRow(5);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var row2 = table.insertRow(6);
        var cell3 = row2.insertCell(0);
        var cell4 = row2.insertCell(1);
        cell1.innerHTML = "Pick-Up Date:";
      //For right now just focusing on getting this datepicker to properlly popup.
        cell2.innerHTML = "<input type='text' name='datepicker' id='datepicker' onFocus=dateSelect()>";
        cell3.innerHTML = "Pick-Up Time:";
        cell4.innerHTML = "<input type='text' name='txtTime' id='txtTime'>";
  }
  else 
  {
        var table = document.getElementById("myTable");
        var length = table.rows.length;
        if(length > 9)
        {
            var del1 = table.deleteRow(5);
            var del2 = table.deleteRow(5);
        }
        var row = table.insertRow(5);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var row2 = table.insertRow(6);
        var cell3 = row2.insertCell(0);
        var cell4 = row2.insertCell(1);
        var row3 = table.insertRow(7);
        var cell5 = row3.insertCell(0);
        var cell6 = row3.insertCell(1);
        cell1.innerHTML = "Delivery Date:";
        cell2.innerHTML = "<input type='text' name='txtDelDate' id='txtDelDate'>";
        cell3.innerHTML = "Delivery Time:";
        cell4.innerHTML = "<input type='text' name='txtDelTime' id='txtDelTime'>";
        cell5.innerHTML = "Delivery Address:";
        cell6.innerHTML = "<input type='text' name='txtDelTime2' id='txtDelTime2'>";
  }
}



function dateSelect()
 $(function() {
    $( "#datepicker" ).datepicker();
  });

HTML Form

<form action="cateringSubmit" method="post">
<table id="myTable" width="600" border="0">
  <tr>
    <td>Company Name</td>
    <td><span id="sprytextfield1">
      <input type="text" name="datepicker2" id="datepicker2">
      <span class="textfieldRequiredMsg">A value is required.</span></span></td>
  </tr>
  <tr>
    <td>Contact Name</td>
    <td><span id="sprytextfield2">
      <input type="text" name="txtConName" id="txtConName">
      <span class="textfieldRequiredMsg">A value is required.</span></span></td>
  </tr>
  <tr>
    <td>Contact Phone Number</td>
    <td><span id="sprytextfield3">
      <input type="text" name="txtPhone" id="txtPhone">
      <span class="textfieldRequiredMsg">A value is required.</span></span></td>
  </tr>
  <tr>
  <td>Email Address</td>
  <td><span id="sprytextfield4">
    <input type="text" name="txtEmail" id="txtEmail">
    <span class="textfieldRequiredMsg">A value is required.</span></span></td>
    </tr>
    <tr>
    <td>Pick-Up or Delivery</td>
    <td><input name="radioButton" type="radio" id="a" onclick="show(a)">Pick-Up  
      <input type="radio" onclick="show(this)" name="radioButton"  id="b" >Delivery</td> 
    </tr>
    <tr>
        <td>Order:</td>
         <td><textarea name="txtOrder" cols="30" rows="10"></textarea></td>
   </tr>       
    <tr>
              <td>Special Pricing (if applicable): </td>
              <td><input name="txtPricing" type="text"></td>
              </tr>
              <tr>
              <td>Special Requests: </td>
              <td><textarea name="txtRequests" cols="30" rows="10"></textarea></td>
              </tr>
              <tr>
              <td colspan="2" align="center"><input name="btnSubmit" type="submit" value="Submit" ></td>
              </tr>

            </table>
</form>
</p>

Answer 1

Since those textbox 's are created dynamically you have to attach those event to document like

$(document).on('focus', '.datepicker', function () {
    $(this).datepicker();
});

Also since you're using 2 datepicker I have used class selector for those elements.

JSFiddle

Answer 2

The JSFiddle is failing for a few reasons:

1. jQuery library isn't being loaded
2. Missing function brackets for dateSelect()
3. Use of inline onClick and onFocus attributes

I would suggest you move to using jQuery's click() and focus() methods to detect click and focus events for your radio buttons. Hopefully this fixes your issue.