JQuery Scrollable List Dissapears if scrolled IE7

Question

Hi there

I have created a time picker using jquery, using the following code

 // Display Time Picker 
$('.time').click(function(){
    $('.timePicker').remove();
    var thisTime = $(this);


    var timePicker = '<ul class="timePicker">'
    timePicker += '<li>09:00</li>'
    timePicker += '<li>09:15</li>'
    timePicker += '</ul>'

    thisTime.after(timePicker);

    $('.timePicker').fadeIn()

    $('.timePicker li').click(function(){
        term = $(this).html();
        $(thisTime).val(term);
        $('.timePicker').remove();
    });
}).blur(function(){
    $('.timePicker').fadeOut();
});

This adds a dropdown scrollable list of times to any input field with the class "time".

This functions as expected in all browsers apart from IE7, where if I scroll the list to choose a time lower down in the list, the list dissapears..

Hope that makes sense, any help would be much appreciated

Many thanks

Answer 1

The problem may be in bubbling events. So it fades out when not expected.

May be OUTER element fades out, when mouse cursor is over INNER elements.

Another idea: try to change lists to divs, play with layout.