【问题标题】:Which event is getting fired after moving out of the jquery-autocomplete widget?移出 jquery-autocomplete 小部件后会触发哪个事件?
【发布时间】:2016-07-07 09:34:52
【问题描述】:

我正在为 jquery-autocomplete 小部件使用 jquery-ui 1.9。 我试图在悬停jquery自动完成菜单项列表时用列表项的蓝色和字体颜色更改背景颜色。 我可以通过添加 css 类在悬停列表项时更改背景颜色,还可以通过添加焦点功能在悬停列表项时更改字体颜色。

_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');
                }
            }
        }

现在,当我悬停列表项时,字体颜色和背景颜色发生了变化,但是当我从小部件中出来或移动到搜索文本框时。 我需要用原始颜色而不是白色更改字体颜色。 所以我创建了 mouseout / mouseleave 函数,但它没有被调用。 当您将鼠标悬停在列表上然后从小部件中出来时,谁能告诉我哪个事件/函数被调用。

【问题讨论】:

    标签: jquery jquery-ui-autocomplete


    【解决方案1】:

    添加如下所示的委托处理程序对我有用。

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

    【讨论】:

      猜你喜欢
      • 2014-09-18
      • 1970-01-01
      • 2015-02-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-11-25
      • 2020-05-21
      • 1970-01-01
      相关资源
      最近更新 更多