jquery UI：日期选择器不出现

Question

由于某些未知原因，数据选择器没有出现在浏览器上。我通过 Ajax 调用 HTML 文件，该文件本身具有 document.ready() 函数。单击日期字段时，它会生成必要的 HTML，但不会在屏幕上显示任何内容。当我点击日期字段（通过 Chrome Inspector 获取）时，正在生成以下代码：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" style="left: 55px; top: 225px; position: absolute; display: block; "><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery.datepicker._adjustDate('#datepicker', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery.datepicker._adjustDate('#datepicker', +1, 'M');" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">April</span> <span class="ui-datepicker-year">2012</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th><span title="Monday">Mo</span></th><th><span title="Tuesday">Tu</span></th><th><span title="Wednesday">We</span></th><th><span title="Thursday">Th</span></th><th><span title="Friday">Fr</span></th><th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">1</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">2</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">3</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">4</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">5</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">6</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">7</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">8</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">9</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">10</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">11</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">12</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">13</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">14</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">15</a></td><td class=" ui-datepicker-days-cell-over  ui-datepicker-today" onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default ui-state-highlight ui-state-hover" href="#">16</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">17</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">18</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">19</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">20</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">21</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">22</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">23</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">24</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">25</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">26</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">27</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">28</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">29</a></td><td class=" " onclick="DP_jQuery.datepicker._selectDay('#datepicker',3,2012, this);return false;"><a class="ui-state-default" href="#">30</a></td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td></tr></tbody></table></div>

更新：

我把代码放在 JsFiddle 上

http://jsfiddle.net/YvQE9/

谢谢

Answer 1

您的网址可能有误。试试这些。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" type="text/css" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

  </head>
  <body>
      <input type="text" id="datepicker" />

      <script>
            $( "input" ).datepicker();
      </script>      
  </body>
</html>
​​​​

这里是 jsFiddle：http://jsfiddle.net/YvQE9/1/

Answer 2

在使用 AJAX 请求加载 <input> 字段后，您必须在其上调用 datepicker()。您可以通过使用.ajaxSuccess 订阅 AJAX 成功事件来做到这一点：jQuery .ajaxSuccess() function

P.S.：不要将脚本与 HTML 混合使用。这不是你想要遵循的方式。您希望将所有 Javascript 保存在 .js 文件中。当文档加载时，您将功能添加到元素中。当您通过 AJAX 调用加载新内容时，您会将事件或小部件附加到新元素。