jQuery UI数据报警器月份和年份组合无法在jQuery BlockUI中工作(弹出)

Question

当我在jQuery中打开BlockUI (弹出窗口)并尝试更改月份和年份时，下拉列表不会打开。它在弹出窗口很好，但在数据报警器的外面。

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

Answer 1

这是因为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类div的blockMsg (或者如果您更改了默认的blockMsgClass选项值，则为您自己的类)
• 或者，如果您单击的元素祖先的子类不是.blockUI css类的div

问题是(div#ui-datepicker-div)是在div.popup之外自动附加的，因此它没有满足任何这些需求。

因此，一个快速的解决方法是将css类blockMsg添加到数据选择器div (它是单击的select元素的祖先)，就像在这个jsFiddle中那样。

另一种解决方案是，一旦弹出div生成，就将datepicker div附加到弹出div中，但是当您打开datepicker时，会出现定位问题。