使用事件委托后动态内容的Tooltip事件处理仍失效

问题根源 #

1. 废弃API导致的事件异常：你使用的live()是jQuery已废弃的事件绑定API，它的委托机制在动态DOM切换场景下稳定性极差，容易出现事件无法触发的情况。
2. 重复事件绑定冲突：每次调用jqToolTip时，都会基于当前元素的类给document.body绑定新的事件委托，多次调用后累积的重复事件会导致触发逻辑混乱。
3. 残留状态干扰：Tooltip容器的样式、内联样式未被彻底清理，上一次弹窗的Tooltip状态会影响下一次弹窗的显示逻辑。
4. Chrome审查元素时恢复正常是临时现象：审查操作会触发DOM重排/重绘，间接修复了事件委托的异常状态，但无法解决根本问题。

解决方案 #

替换废弃API，重构插件逻辑，确保事件只绑定一次，同时彻底清理残留状态：

修改后的完整代码 #

(function ($) {
    'use strict';
    // 标记是否已初始化事件，避免重复绑定
    if (!$.data(document.body, 'jqToolTipInitialized')) {
        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'
        };

        // 用jQuery标准事件委托API on()替代废弃的live()
        $(document.body).on('mouseenter', '[class*="tooltip"]', function (e) {
            var $this = $(this);
            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") || 'right';
            var top = $this.offset().top;
            var left = $this.offset().left;
            var offsetX = $this.data("tooltip-offset-x") || 0;
            var offsetY = $this.data("tooltip-offset-y") || 0;

            var cssAdd = '';
            var cssColorAdd = '';
            var $tooltipBox = $('.' + opts.tooltipDiv);

            // 彻底重置Tooltip容器的样式、内容和内联样式
            $tooltipBox.removeClass(opts.tooltipFadeOut + ' '
                + opts.tooltipBoxBottom + ' '
                + opts.tooltipBoxRight + ' '
                + opts.tooltipBoxTop + ' '
                + opts.tooltipBoxLeft + ' '
                + opts.tooltipBoxRed + ' '
                + opts.tooltipBoxBottomRed + ' '
                + opts.tooltipBoxTopRed + ' '
                + opts.tooltipBoxLeftRed + ' '
                + opts.tooltipBoxRightRed + ' '
                + 'tooltipBoxArrowOffsetX tooltipBoxArrowOffsetY')
                .html(helptext)
                .find('style').remove();

            switch (direction) {
                case 'top':
                    top = top - 48 + offsetY;
                    left = left + $this.width() / 2 - 25 + offsetX;
                    cssAdd = opts.tooltipBoxTop;
                    cssColorAdd = opts.tooltipBoxTopRed;
                    break;
                case 'right':
                    top = top + $this.height() / 2 - 13 + offsetY;
                    left = left + $this.width() + 20 + offsetX;
                    cssAdd = opts.tooltipBoxRight;
                    cssColorAdd = opts.tooltipBoxRightRed;
                    break;
                case 'bottom':
                    top = top + $this.height() + 14 + offsetY;
                    left = left + $this.width() / 2 - 28 + offsetX;
                    cssAdd = opts.tooltipBoxBottom;
                    cssColorAdd = opts.tooltipBoxBottomRed;
                    break;
                case 'left':
                    top = top + $this.height() / 2 - 13 + offsetY;
                    left = left - $tooltipBox.width() - 16 + offsetX;
                    cssAdd = opts.tooltipBoxLeft;
                    cssColorAdd = opts.tooltipBoxLeftRed;
                    break;
            }

            if (color === 'red') {
                $tooltipBox.addClass(opts.tooltipBoxRed).addClass(cssColorAdd);
            }

            if (arrowOffsetx != null && arrowOffsetx.length > 0) {
                $tooltipBox.addClass('tooltipBoxArrowOffsetX')
                    .append('<style>.tooltipBoxArrowOffsetX::after,.tooltipBoxArrowOffsetX::before{left:' + arrowOffsetx + ' !important;}</style>');
            }

            if (arrowOffsety != null && arrowOffsety.length > 0) {
                $tooltipBox.addClass('tooltipBoxArrowOffsetY')
                    .append('<style>.tooltipBoxArrowOffsetY::after,.tooltipBoxArrowOffsetY::before{top:' + arrowOffsety + ' !important;}</style>');
            }

            $tooltipBox.addClass(cssAdd).css({ left: left, top: top }).fadeIn();
        });

        $(document.body).on('mouseleave', '[class*="tooltip"]', function (e) {
            $('.' + opts.tooltipDiv).addClass(opts.tooltipFadeOut);
        });

        $(document.body).on('click', '[class*="tooltip"]', function (e) {
            if ($(this).data("tooltip-onclickhide") === '1') {
                $('.' + opts.tooltipDiv).addClass(opts.tooltipFadeOut);
            }
        });

        // 标记已完成初始化
        $.data(document.body, 'jqToolTipInitialized', true);
    }

    $.fn.extend({
        jqToolTip: function () {
            // 确保Tooltip容器存在（如果页面初始没有的话）
            if (!$('.' + 'tooltipbox').length) {
                $('body').append('<div class="tooltipbox"></div>');
            }
            return this;
        }
    });
})(jQuery);

关键修改点说明 #

1. 替换废弃API：用on()替代live()，这是jQuery 1.7+推荐的标准事件委托方式，稳定性和兼容性更好。
2. 单次事件绑定：通过$.data()标记初始化状态，事件委托只绑定一次，避免重复绑定导致的逻辑冲突。
3. 通用选择器适配动态内容：用[class*="tooltip"]匹配所有带tooltip类的元素，无需每次获取当前元素的特定类，完美适配动态生成的弹窗内容。
4. 彻底清理残留状态：在每次触发mouseenter时，重置Tooltip容器的样式、内容和内联样式，避免上一次弹窗的状态干扰当前显示。
5. 性能优化：缓存当前元素$this，减少重复DOM查询次数。

使用注意事项 #

• 只需在页面初始化时调用一次$('.tooltip-element').jqToolTip()，后续弹窗切换无需重复调用。
• 弹窗关闭时，建议调用$('.tooltipbox').addClass('tooltipFadeOut')手动隐藏Tooltip，避免残留显示。

内容的提问来源于stack exchange，提问作者Aquaphor