为什么 jquery ui 的 (v1.10.0) datepicker 不能在 Firefox v18.0.1 中为我工作？

Question

我在让 jquery ui datepicker 显示在 jquery ui 内动态添加的元素上时遇到问题，该元素可选择但仅在 Firefox 中。

一旦选择了其中一个可选择项，就会创建一个动态创建的输入并将其附加到可选择项。在动态添加到 dom 之前，该输入被分配为日期选择器。

我用我的问题示例创建了一个jsfiddle...它在 Chrome 中运行良好，但 Firefox 不喜欢它。 “不喜欢”是指在选择其中一个可选标题后单击输入时不会显示日期选择器。

这是我在上面链接到的 jsfiddle 的原始 javascript：

$(document).ready(function(){
    $('.selectable').selectable({
        filter: 'li',
        cancel: 'input',
        stop: function(e, ui){
            var li = $(this).find('li');

            if (li.length > 0){
                $(li).each(function(){
                    if ($(this).hasClass('ui-selected')){
                        if ($(this).find('.start_date').length == 0){
                            var datepicker = $('<input/>').prop({'readonly': true}).datepicker({ minDate: 1 });

                            $('<div/>').attr({'class': 'start_date subtitle'})
                                .append($('<label/>').css({'display': 'inline-block'}).text('Start Date:'))
                                .append(datepicker)
                                .appendTo(this)
                        }
                    } else {
                        $(this).find('.start_date').remove();
                    }
                });
            } else {
                $(this).find('li div.start_date').remove();
            }
        }
    }).disableSelection();
});

谢谢

Answer 1

我认为问题在于selectable 行为正在为其子级吞下鼠标事件，这会阻止日期选择器显示。尝试添加显式点击处理程序以显示选择器：

var datepicker = $('<input/>')
    .prop({'readonly': true})
    .datepicker({ minDate: 1 })
    .click(function(){ $(this).datepicker("show"); });