jQuery datepicker 在第二次点击时不起作用答案

【问题标题】：jQuery datapicker not working on second clickjQuery datepicker 在第二次点击时不起作用
【发布时间】：2013-12-16 08:48:55
【问题描述】：

谁能帮我在http://dev.ther8server.com的from和to部分找到日期选择器背后的问题

当我单击从日期并选择一个日期并再次单击从日期选择器不会弹出。我需要单击to 或身体的其他位置，然后再次单击from 使其正常工作。我真的很难找到这个问题背后的原因。任何人都可以帮助我提出任何建议。谢谢。

此问题仅存在于 Chrome 和 Safari 中。它在 Firefox 中运行良好。

HTML 代码：

<li class="date-field" id="from">
                    <a href="#" onclick="return false;" class="calendar">opener</a>
                    <input type="text" value="Check in" name="date_in" value="" /> 
                    <div class="datepicker-holder"></div> 
                  </li>
                  <li class="date-field" id="to">
                    <a href="#" onclick="return false;" class="calendar">opener</a>
                      <input type="text" value="Check out" name="date_out"  />
                      <div class="datepicker-holder"></div>
                  </li>

进口和 JS：

  <script type="text/javascript" src="/assets/js/jquery-1.8.3.min.js"></script>


  <script src="/assets/js/frontend/jquery-ui-1.10.2.custom.js"></script>

  <script type="text/javascript" src="/assets/js/jquery.main.js"></script>
  <script type="text/javascript" src="/assets/js/main.js"></script>
  <script type="text/javascript" src="/assets/js/loadmask/jquery.loadmask.js"></script>
  <!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="/assets/css/ie.css" /><![endif]-->

  <script type="text/javascript">
  var jslocale = "en-AU";
  var ajaxload = "";

  var search_params = {"global_keywords":"","referer_page":"","keywords":"","room":false,"date_in":"","date_out":"","hotel_id":"","destination_id":"","date_in_stamp":"","date_out_stamp":"","view_type":"","trip_rating":"","star_rating":"","min_rate":"","max_rate":"","amenities":"","sort":"","all_results":"","roomCode":"","rateCode":"","bedCode":"","allStarsSelection":"","region_id":"","lang":null,"country":null,"curr":null}; 


  </script>

【问题讨论】：

你应该把相关代码放在你的问题中。
@fbynite - 我发布了，谢谢。
@amenadiel - 不幸的是，自签名...你能点击继续吗？

标签： javascript jquery jquery-ui cross-browser datepicker

【解决方案1】：

首先，我不太明白你为什么要使用这么多代码来管理两个简单的日期选择器，而不是只使用jQueryUI's default。

其次，我可以看到您在用户单击输入后打开日期选择器，但绑定链接到 focus 事件而不是 click 事件。

当您选择日期时，您会隐藏日期选择器并以编程方式触发焦点事件以将光标返回到输入。问题是，焦点事件只触发一次。只需单击已聚焦的元素，它就不会再次触发。直到您通过单击外部事件来触发模糊事件。

对your script 的快速而肮脏的建议。变化：

input.bind('focus',function(){
                showDatepicker();
            })

到

input.bind('click',function(){
            showDatepicker();
        })

【讨论】：