2016-07-07 3 views
0

私はjquery-autiの完全なウィジェットのためにjquery-ui 1.9を使用しています。 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/ –

関連する問題