Javascript创建字段上的jqueryUI datepicker答案

【问题标题】：jqueryUI datepicker on a Javascript created fieldJavascript创建字段上的jqueryUI datepicker
【发布时间】：2014-02-28 15:59:51
【问题描述】：

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

* 我在玩它，注意到当我最初点击日期选择时它什么也没做，但是当我点击另一个字段并返回它时，它会起作用吗？

现在我专注于选择 Pickup 时 javascript 中可用的字段，该字段位于 Javascript 的第 22 行。

谢谢大家！

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>

【问题讨论】：

小提琴似乎不起作用，没有日期选择可见。这是问题吗？ OP 似乎表明该字段存在
您的 javascript 位于何处？它是使用 DOM 加载还是之后加载？
我正在使用 MVC，并且我让控制器在呈现页面之前将我的 javascript 推送到视图。

标签： javascript jquery html jquery-ui datepicker

【解决方案1】：

由于这些 textbox 是动态创建的，因此您必须将这些事件附加到文档中

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

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

JSFiddle

【讨论】：

好的，是的，我知道示例中没有加载 jquery 和 jquery，因为我的内部站点上有链接。但是，我将尝试按照您的说法将事件添加到文档中。谢谢你这么清楚:)
@Farr433 很高兴能帮到你:)

【解决方案2】：

JSFiddle 失败有几个原因：

jQuery 库未加载
dateSelect() 缺少函数括号
使用内联 onClick 和 onFocus 属性

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

【讨论】：