如何在select2选择上启用悬停事件 [英] How do enable hover event on select2 choice
问题描述
我正在使用select2.内置事件不支持所选项目上的悬停事件,因此,我试图在将鼠标悬停在选定项目上时触发悬停事件(多项选择).
I'm using select2. The build-in event does not support hover event on choiced item, therefore I'm trying to fire hover event when mouse over the item (multiple selection).
function tagFormat(state) {
return '<span class="tagElement">' + state.text + '</span>';
}
$('.tagElement').hover(function(event){
alert('something');
});
var sampleTags = ['red','white'];
$("[taggable]").select2({
formatSelection: tagFormat,
maximumInputLength: 10,
tags:sampleTags,
tokenSeparators: [",", " "]
});
在 http://bootply.com/96527 引导,您可以看到在select2之外,悬停事件确实可以在select2内部触发,但不会触发.内部机制是什么?
Bootply at http://bootply.com/96527 , you can see that outside select2 the hover event does fire however inside select2 it doesn't. What's the mechanism inside?
推荐答案
select2.js具有.show函数,只要将鼠标悬停在选项上,它就会更新属性"aria- describeby".此功能可以扩展...
select2.js has a function, .show, which updates the attribute "aria-describedby" whenever you hover over an option. This function can be extended...
c.prototype.show = function() {
var b = a.Event("show.bs." + this.type);
this.$element.trigger(b);
var d = a.contains(this.$element[0].ownerDocument.documentElement, this.$element[0]);
if (b.isDefaultPrevented() || !d) return;
var e = this,
f = this.tip(),
g = this.getUID(this.type);
/*look for the select box and find the 'onmouseover' attribute */
var s = this.$element.siblings('select');
if (s != undefined && s.attr('onmouseover') != undefined) {
var m = s.attr('onmouseover');
eval(m);
}
...
}
这篇关于如何在select2选择上启用悬停事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!