javascript - 重复调用 JavaScript 函数会产生冲突

Question

我正在使用以下 JS 函数来实现悬停工具提示效果。该功能运行良好。使用ajax加载某些区域后出现问题。我需要调用这个函数来处理通过ajax(Jquery)收集的数据。那也可以。问题是当我关闭通过 ajax 调用的区域时，我在基页上看到意外的行为。以前的工具提示效果现在显示自身内部的气泡(如下图所示)。知道如何防止这种冲突吗？

function tooltip(){
    $('.master_tooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
    }, function() {
            // Hover out code
            $(this).attr('title', $(this).data('tipText'));
            $('.tooltip').remove();
    }).mousemove(function(e) {
            var mousex = e.pageX + 20; //Get X coordinates
            var mousey = e.pageY + 10; //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex })
    });
}

Answer 1

仅调用该函数一次，否则事件处理程序将为已存在的元素绑定(bind)多次。

您需要做的是重写它，以便它委托(delegate)鼠标事件并与动态插入的元素一起使用，如下所示

function tooltip(){
    $(document).on({
        mouseenter : function() {
            var title = $(this).attr('title');
            $(this).data('tipText', title).removeAttr('title');
            $('<p class="tooltip"></p>').text(title)
                                        .appendTo('body')
                                        .fadeIn('slow');
        },
        mouseleave : function() {
            $(this).attr('title', $(this).data('tipText'));
            $('.tooltip').remove();
        },
        mouseover : function(e) {
            var mousex = e.pageX + 20; //Get X coordinates
            var mousey = e.pageY + 10; //Get Y coordinates
            $('.tooltip').css({ top: mousey, left: mousex })
        }
    }, '.master_tooltip');
}