2016-07-07 66 views
0

我正在使用jquery-ui 1.9 for jquery-autocomplete部件。 我試圖在懸停jquery自動完成菜單項列表的同時用藍色和字體顏色來改變列表項的白色背景顏色。 我可以在懸停列表項的同時通過添加css類來更改背景顏色,並且還可以在懸停列表項的同時通過添加焦點功能來更改字體顏色。移出jquery-autocomplete小部件後,哪個事件被激發?

_focus: function (event, ui) { 
    event.preventDefault();  
    var htmlString= $('.ui-autocomplete').html(); 
    //Recently unFocused Element 
    var foundUnFocusedEle = $(htmlString).find('.focusedElement'); 
    if(foundUnFocusedEle.length != 0) { 
    var unFocusedEleId = $(foundUnFocusedEle).attr('id'); 
    var unFocusedEleHtml = $('#'+unFocusedEleId).html(); 
    if($(unFocusedEleHtml).hasClass('add-search-result-label') 
    && $(unFocusedEleHtml).hasClass('add-search-result-sublabel')) { 
    $('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').removeClass('hover-search-result-label'); 
    $('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').addClass('search-result-label'); 
    $('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-label').removeClass('add-search-result-label'); 

    $('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').removeClass('hover-search-result-sublabel'); 
    $('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').addClass('search-result-sublabel'); 
    $('#'+(foundUnFocusedEle).attr('id')).find('.add-search-result-sublabel').removeClass('add-search-result-sublabel'); 
    } 
    $('#'+unFocusedEleId).removeClass('focusedElement'); 
    } 
    //ui-state-focus 
var foundUiStateFocus = $(htmlString).find('.ui-state-focus'); 
      //console.log(foundUiStateFocus); 
      if(foundUiStateFocus.hasClass('ui-state-focus')) { 
       //console.log('it has ui-state-focus'); 
       var focusedEleId = $(foundUiStateFocus).attr('id'); 
       //console.log('id: '+focusedEleId); 
       $('#'+focusedEleId).addClass('focusedElement'); 
       var focusedEleHtml = $('#'+focusedEleId).html(); 
       if($(focusedEleHtml).hasClass('search-result-label') && $(focusedEleHtml).hasClass('search-result-sublabel')) { 
        //console.log('it has search-result-label'); 
        //console.log($('#'+(foundUiStateFocus).attr('id')).find('.search-result-label')); 
        $('#'+(foundUiStateFocus).attr('id')).find('.search-result-label').addClass('add-search-result-label'); 
        $('#'+(foundUiStateFocus).attr('id')).find('.search-result-label').removeClass('search-result-label'); 

        $('#'+(foundUiStateFocus).attr('id')).find('.search-result-sublabel').addClass('add-search-result-sublabel'); 
        $('#'+(foundUiStateFocus).attr('id')).find('.search-result-sublabel').removeClass('search-result-sublabel'); 

        $('#'+(foundUiStateFocus).attr('id')).find('.add-search-result-label').addClass('hover-search-result-label'); 
        $('#'+(foundUiStateFocus).attr('id')).find('.add-search-result-sublabel').addClass('hover-search-result-sublabel'); 
       } 
      } 
     } 

現在,當我徘徊chnaged列表項,字體顏色和背景顏色,但是當我從窗口小部件出來或者移動到搜索文本框中。 我需要改變原始顏色而不是白色的字體顏色。 所以我創建了mouseout/mouseleave函數,但它沒有被調用。 任何人都可以告訴我,當你將鼠標懸停在列表上,然後從窗口小部件出來時,會調用哪個事件/函數。

回答

0

添加一個委託處理程序,如下所示爲我工作。

$(document).on('mouseout', '.ui-autocomplete.ui-menu', function() { 
console.log('trigget'); 
}); 
+0

一些小提琴我分叉測試:http://jsfiddle.net/4t3v5r6d/ –

相關問題