javascript - jQuery 日期选择器在第二次单击时不起作用

Question

任何人都可以帮我找到 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>

Answer 1

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

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

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

对 your script 的快速而肮脏的建议。更改:

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

到

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