javascript - Javascript 创建的字段上的 jqueryUI datepicker

Question

我正在使用 Javascript，基于单选选择，它会更改表单中的字段。这些字段是使用 Javascript 生成的。该部分运行得非常好，但是其中一个字段也是我尝试使用 jQueryUI 日期选择器的日期。由于某种原因，它没有在 Javascript 创建的字段上运行 Javascript。我不确定脚本是否是我的订单，或者是什么，但我们将不胜感激。这是一个带有我正在使用的代码的 JSFiddle。它没有运行，因为我没有链接所有依赖项，但您可以大致了解我是如何设置它的。如果您觉得需要或链接到我的页面，我可以花更多时间放入依赖项。

* 我在玩它并注意到当我最初点击日期选择时它没有做任何事情但是当我点击另一个字段并返回它时，它然后工作？

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.

谢谢大家!

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 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

由于那些 textbox 是动态创建的，所以你必须将这些事件附加到文档中，例如

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

此外，由于您使用的是 2 个日期选择器，因此我对这些元素使用了类选择器。

JSFiddle