我有两个ModalPopup,第一个打开并有一个Tooltip文本,用户可以使用“mouseenter”事件侦听器查看更多细节。一旦用户通过三个按钮中的一个单击关闭模态,第二个模态弹出窗口打开时显示另一个工具提示文本。2“鼠标输入”的工具提示文本在第二个模态弹出窗口中不起作用。这是一个全新的Modalpopup,虽然我已经尝试使用相同的模式,它仍然不工作。
所以流程是:用户点击按钮-〉加载-〉带工具提示的模态弹出窗口-〉用户点击3个选项中的1个按钮-〉模态弹出窗口关闭-〉加载-〉带工具提示的模态弹出窗口2-〉等...
因此,它加载动态内容,然后使用委托来设置工具提示侦听器,然后关闭/删除该内容,然后加载更多动态内容,并尝试再次使用委托的工具提示侦听器。
我试过在每个模态加载上完全删除工具提示,在重新绑定之前解除模态加载上的所有内容,在重新绑定之前解除工具提示代码中的绑定,等等。
有趣的是,当第二个modalpopup打开时,如果我使用chrome“Inspect Element”,工具提示又开始工作了。
Tootip代码:
(function ($) {
'use strict';
$.fn.extend({
jqToolTip: function () {
var opts = {
tooltipDiv: 'tooltipbox',
tooltipFadeOut: 'tooltipFadeOut',
tooltipBoxTop: 'tooltipbox-top',
tooltipBoxRight: 'tooltipbox-right',
tooltipBoxLeft: 'tooltipbox-left',
tooltipBoxBottom: 'tooltipbox-bottom',
tooltipBoxRed: 'tooltipbox-red',
tooltipBoxBottomRed: 'tooltipbox-bottom-red',
tooltipBoxTopRed: 'tooltipbox-top-red',
tooltipBoxLeftRed: 'tooltipbox-left-red',
tooltipBoxRightRed: 'tooltipbox-right-red'
};
const classSelector = $(this).attr("class").split(/\s+/).find(x => x.includes("tooltip"));
$(document.body).live('mouseenter', `.${classSelector}`, function (e) {
var color = $(this).data("tooltip-color");
var arrowOffsetx = $(this).data("tooltip-arrow-offset-x");
var arrowOffsety = $(this).data("tooltip-arrow-offset-y");
var helptext = $(this).data("tooltip");
var direction = $(this).data("tooltip-direction");
if (direction == null) direction = 'right';
var top = $(this).offset().top;
var left = $(this).offset().left;
var offsetX = $(this).data("tooltip-offset-x");
if (offsetX == null) offsetX = 0;
var offsetY = $(this).data("tooltip-offset-y");
if (offsetY == null) offsetY = 0;
//console.log(top,left,$(this).width());
var cssAdd = '';
var cssColorAdd = '';
$('.' + opts.tooltipDiv).removeClass(opts.tooltipFadeOut + ' '
+ opts.tooltipBoxBottom + ' '
+ opts.tooltipBoxRight + ' '
+ opts.tooltipBoxTop + ' '
+ opts.tooltipBoxLeft + ' '
+ opts.tooltipBoxRed + ' '
+ opts.tooltipBoxBottomRed + ' '
+ opts.tooltipBoxTopRed + ' '
+ opts.tooltipBoxLeftRed + ' '
+ opts.tooltipBoxRightRed).html(helptext);
switch (direction) {
case 'top': // top
top = top - 48 + offsetY;
left = left + $(this).width() / 2 - 25 + offsetX;
cssAdd = opts.tooltipBoxTop;
cssColorAdd = opts.tooltipBoxTopRed;
break;
case 'right': // right
top = top + $(this).height() / 2 - 13 + offsetY;
left = left + $(this).width() + 20 + offsetX;
cssAdd = opts.tooltipBoxRight;
cssColorAdd = opts.tooltipBoxRightRed;
break;
case 'bottom': // bottom
top = top + $(this).height() + 14 + offsetY;
left = left + $(this).width() / 2 - 28 + offsetX;
cssAdd = opts.tooltipBoxBottom;
cssColorAdd = opts.tooltipBoxBottomRed;
break;
case 'left': // left
top = top + $(this).height() / 2 - 13 + offsetY;
left = left - $('.' + opts.tooltipDiv).width() - 16 + offsetX;
cssAdd = opts.tooltipBoxLeft;
cssColorAdd = opts.tooltipBoxLeftRed;
break;
}
//console.log(left);
if (color == 'red') {
$('.' + opts.tooltipDiv).addClass(opts.tooltipBoxRed);
$('.' + opts.tooltipDiv).addClass(cssColorAdd);
}
if (typeof(arrowOffsetx) != "undefined" && arrowOffsetx.length > 0) {
$('.' + opts.tooltipDiv)
.addClass('tooltipBoxArrowOffsetX')
.append('<style>.tooltipBoxArrowOffsetX::after,.tooltipBoxArrowOffsetX::before{left:' + arrowOffsetx + ' !important;}</style>')
}
if (typeof (arrowOffsety) != "undefined" && arrowOffsety.length > 0) {
$('.' + opts.tooltipDiv)
.addClass('tooltipBoxArrowOffsetY')
.append('<style>.tooltipBoxArrowOffsetY::after,.tooltipBoxArrowOffsetY::before{left:' + arrowOffsety + ' !important;}</style>');
}
$('.' + opts.tooltipDiv).addClass(cssAdd).css({ left: left, top: top }).fadeIn();
})
$(document.body).live('mouseleave', `.${classSelector}`, function (e) {
$('.' + opts.tooltipDiv).addClass(opts.tooltipFadeOut);
})
$(document.body).live('click', `.${classSelector}`, function (e) {
var ishide = $(this).data("tooltip-onclickhide") == '1';
if (ishide) $('.' + opts.tooltipDiv).addClass(opts.tooltipFadeOut);
})
return this;
},
})
})(jQuery);
1条答案
按热度按时间nbnkbykc1#
“mouseenter”和“mouseleave”事件的事件委托只能在捕获阶段完成。
替换
与
“mouseleave”也是如此。