jquery - 下拉菜单在全日历单元格中不起作用

Question

下拉菜单在完整日历单元格中不起作用。这是我的代码http://jsfiddle.net/3E8nk/1454/

在此，当单击下拉菜单时，选项不会出现

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-06-12',
    editable: true,
    eventRender: function(event, element, view) {  

        return $('<div>' + event.title + '</div>');  
    },

    events: [
        {
            title: '<select id="drp"><option>Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select>',
            start: '2014-06-01'
        },
        {
            title: 'Long Event',
            start: '2014-06-07',
            end: '2014-06-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-09T16:00:00'
        },
    ]
});

Answer 1

您可以将其视为 fullcalendar 中的错误。正是这段代码窃取了点击:

    element
        .mousedown(function(ev) { // prevent native <a> selection for others
            ev.preventDefault();
        })
        .click(function(ev) {
            if (isResizing) {
                ev.preventDefault(); // prevent link from being visited (only method that worked in IE6)
                ev.stopImmediatePropagation(); // prevent fullcalendar eventClick handler from being called
                                               // (eventElementHandlers needs to be bound after resizableDayEvent)
            }
        });

作为解决方法，您可以设置 editable: false、ressized: false。

作为解决方案，您可以在 fullcalendar 完全初始化后在下拉列表中调用此方法，以防止单击/鼠标按下到达附加有问题处理程序的 div.ui-draggable。

$("#drp").on("mousedown click", function(event){event.stopPropagation()});