8

当我在 BlockUI（弹出窗口）中打开 jQuery UI 日期选择器并尝试更改月份和年份时，下拉菜单不会打开。它在弹出窗口中运行良好，但在日期选择器之外。

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            
    }); 
});

jsFiddle

4

1 回答 1

11

这是因为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;
};

因此，您的点击事件将仅传播：

  • 如果单击的元素祖先是div带有 css 类blockMsg的（或者如果您更改了默认blockMsgClass选项值，则为您自己的类）
  • 或者如果您单击的元素祖先的子元素不是具有.blockUIcss 类的 div

问题是 jquery-ui datepicker div ( div#ui-datepicker-div) 会自动附加到您的外部div.popup，因此它不满足任何这些要求。

因此，一个快速的解决方法是将 css 类添加blockMsg到 datpicker div（它是单击select元素的祖先），就像在这个 jsFiddle中一样。

另一种解决方案是在生成日期选择器 div 后将其附加到弹出 div，但是在打开日期选择器时会遇到定位问题。

于 2013-08-12T13:33:49.797 回答