Question

我正在使用Javascript并根据收音机选择更改表单中的字段。这些字段是使用Javascript生成的。那部分操作非常好但是其中一个字段也是我试图使用jQueryUI datepicker的日期。由于某种原因，它没有在Javascript创建的字段上运行Javascript。我不确定这是脚本所在的订单是什么，或者什么，但任何帮助将不胜感激。这是一个带有我正在使用的代码的JSFiddle。它没有运行，因为我没有链接所有依赖项，但是您可以概述我如何设置它。如果您觉得需要或者链接到我的页面，我可以花更多的时间放入依赖项。

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

现在我专注于在Javascript的第22行选择了Pick up时在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

由于{em>动态创建了textbox，您必须将这些事件附加到文档

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

此外，由于你使用的是2个日期选择器，我已经为这些元素使用了类选择器。

JSFiddle

Answer 2

JSFiddle失败的原因有几个：

未加载jQuery库
缺少dateSelect（）
使用内联onClick和onFocus属性

我建议你转而使用jQuery的click（）和focus（）方法来检测单选按钮的点击和焦点事件。希望这可以解决您的问题。

Javascript创建的字段上的jqueryUI datepicker

2 个答案:

JSFiddle