当我在BlockUI(弹出窗口)中打开jQuery UI datepicker并尝试更改月份和年份时,下拉列表无法打开.它在弹出窗口工作正常,但在datepicker的一边.
HTML：
<div class="popup">
Date Picker<input type="text" class="datepicker" />
</div>
jQuery的：
$(document).ready(function(e) {
$.blockUI({
message:$('.popup'),focusInput: false,onBlock:function(){}
});
$( ".datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',changeYear: true,changeMonth: true,yearRange: 'c-10:c+3',showButtonPanel: false
});
});
解决方法
这是因为
jquery blockUI正在捕捉你的点击事件,看看它的handler()函数：
// event handler to suppress keyboard/mouse events when blocking
function handler(e) {
// allow tab navigation (conditionally)
[...]
var opts = e.data;
// allow events within the message content
if ($(e.target).parents('div.' + opts.blockMsgClass).length > 0)
return true;
// allow events for content that is not being blocked
return $(e.target).parents().children().filter('div.blockUI').length == 0;
};
因此,您的点击事件将仅传播：
>如果单击的元素祖先是带有css类blockMsg的div(如果更改了默认的blockMsgClass选项值,则为您自己的类)
>或者如果你点击的元素祖先的孩子不是.blockUI css类的div
问题是jquery-ui datepicker div(div#ui-datepicker-div)会自动附加到div.popup之外,因此它不能满足任何这些要求.
因此,快速解决方法是将css类blockMsg添加到datpicker div(它是单击的select元素的祖先),如this jsFiddle所示.
