jquery UI : Datepicker가 나타나지 않습니다.

Question

몇 가지 알 수없는 이유로 DAta Picker가 브라우저에 표시되지 않습니다. 나는 자체적으로 document.ready() 함수를 가지고있는 Ajax를 통해 HTML 파일을 호출한다. 날짜 필드를 클릭하면 필요한 HTML이 생성되지만 화면에 아무 것도 표시되지 않습니다.

<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

당신은 아마 틀린 URL 일 것입니다. 이것들을 시험해 보라. 여기

<!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입니다 :

Answer 2

<input> 필드를 AJAX 요청으로로드 한 후 datepicker()을 호출해야합니다. 그것. .ajaxSuccess으로 AJAX 성공 이벤트에 가입하여이 작업을 수행 할 수 있습니다. jQuery .ajaxSuccess() function

피씨 : HTML과 스크립트를 혼용하지 마십시오. 따라하기를 원하는 방식이 아닙니다. 모든 자바 스크립트를 .js 개의 파일에 보관하고 싶습니다. 문서가로드되면 요소에 기능을 추가합니다. AJAX 호출로 새 컨텐츠를로드 할 때 이벤트 또는 위젯을 새 요소에 첨부합니다.