jquery datepicker没有隐藏在ios上，当点击背景 [英] jquery datepicker not hiding on ios when clicked on background

问题描述

我有一个小问题与jquery datepicker和ios。

当单击输入字段时，datepicker会按预期显示。
但是当点击背景（不选择日期）时，datepicker应该隐藏。这在桌面上工作，但不是在我测试的所有ios分区上。
可以在此笔上找到一个示例设置

 < div id =test> 
< form class =booking-formaction =＃method =POST> 
< input type =textid =check_in_datename =check_in_dateplaceholder =Check-in-date> 
< input type =textid =check_out_datename =check_out_dateplaceholder =Check-out-date> 
< input class =bookbuttonname =booking_step_1_submittype =submitvalue =检查可用性/> 
< / form> 
< / div> 
 
 $（＃check_in_date）。attr（'readonly'，true）; 
 $（＃check_out_date）。attr（'readonly'，true）; 
 
 var array_1 = [2015-01-24，2015-01-26，2015-01-27，2015-01-28]; 
 
 $（#check_in_date）.datepicker（{
 minDate：0，
 maxDate：+ 1y，
 changeMonth：true，
 numberOfMonths：1，
 dateFormat：yy-mm-dd，
 beforeShowDay：function（date）{
 var string = jQuery.datepicker.formatDate（'yy-mm-dd'日期）; 
 return [array_1.indexOf（string）== -1] 
}，
 onClose：function（selectedDate）{
 if（selectedDate）{
 $（#check_out_date）.datepicker（option，minDate，selectedDate）; 
 
} 
} 
 
}）; 
 $（#check_out_date）.datepicker（{
 minDate：0，
 maxDate：+ 1y，
 changeMonth：true，
 numberOfMonths：1， 
 dateFormat：yy-mm-dd，
 beforeShowDay：function（date）{
 var string = jQuery.datepicker.formatDate（'yy-mm-dd'，date）; 
 return [array_1.indexOf（string）== -1] 
}，
 onClose：function（selectedDate）{
 if（selectedDate）{
 $（＃ check_in_date）.datepicker（option，maxDate，selectedDate）; 
 
} 
} 
 
}）; 
  

我想知道是否有解决方法。

谢谢

解决方案

我知道这个回应有点迟了，在我的iPhone上测试时出现问题。我认为这可能是一个长期的jquery ui bug。

查看详细说明问题的此门票：
http://bugs.jqueryui.com/ticket/9308

此页面详细说明了根本原因和可能的解决方法：
https://developer.mozilla.org/en-US/docs/Web /事件/点击＃Safari_Mobile

Safari Mobile 7.0+（也可能是较早版本）遭受
对于通常不是
交互式（例如）的元素，点击事件不会触发的错误，也没有将事件监听器
直接附加到元素本身（即事件委托是
被使用）。看到这个现场示例进行演示。另请参见
Safari的文档，使元素可点击，并定义
clickable元素。

此错误的已知解决方法：

• 在元素或其任何祖先上设置 cursor：pointer; p>




• 在元素或其任何祖先添加一个虚拟 onclick =属性，直到但不包括




• 使用通常的交互式元素（例如< ; a> ）而不是一般不是交互式的（例如< div> ）。




• 停止使用点击事件委托。

I have a small problem with the jquery datepicker and ios.

When clicked on the input field the datepicker appears as expected. But when clicked on the background (without selecting a date) the datepicker should hide. This works on desktop but not on all the ios divices I tested. An example setup can be found on this pen

<div id="test">
    <form class="booking-form" action="#" method="POST">
        <input type="text" id="check_in_date" name="check_in_date" placeholder="Check-in-date">
        <input type="text" id="check_out_date" name="check_out_date" placeholder="Check-out-date">
        <input class="bookbutton" name="booking_step_1_submit" type="submit" value="Check Availability" />
</form>
</div>

    $("#check_in_date").attr('readonly', true);
        $("#check_out_date").attr('readonly', true);

        var array_1 = ["2015-01-24","2015-01-26","2015-01-27", "2015-01-28"];

        $( "#check_in_date" ).datepicker({
              minDate: 0,
              maxDate: "+1y",
              changeMonth: true,
              numberOfMonths: 1,
              dateFormat: "yy-mm-dd",
              beforeShowDay: function(date){
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [ array_1.indexOf(string) == -1 ]
              },
              onClose: function( selectedDate ) {
                  if (selectedDate) {
                    $( "#check_out_date" ).datepicker( "option", "minDate", selectedDate );

                  }
              }

            });
        $( "#check_out_date" ).datepicker({
              minDate: 0,
              maxDate: "+1y",
              changeMonth: true,
              numberOfMonths: 1,
              dateFormat: "yy-mm-dd",
              beforeShowDay: function(date){
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [ array_1.indexOf(string) == -1 ]
              },
              onClose: function( selectedDate ) {
                  if (selectedDate) {
                $( "#check_in_date ").datepicker( "option", "maxDate", selectedDate);

                  }
              }

            });

I would like to know if there is a work around for this.

Thanks

解决方案

I know this response is a bit late, but I just ran across this same issue when testing on my iPhone. I think this may be a longstanding jquery ui bug.

See this ticket detailing the issue: http://bugs.jqueryui.com/ticket/9308

And this page detailing the root cause and possible workarounds: https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. ) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of "clickable element".

Known workarounds for this bug:

• Set cursor: pointer; on the element or any of its ancestors.

• Add a dummy onclick="" attribute to the element or any of its ancestors up to but not including <body>.

• Use a typically interactive element (e.g. <a>) instead instead of one that isn't typically interactive (e.g. <div>).

• Stop using click event delegation.

这篇关于jquery datepicker没有隐藏在ios上，当点击背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！