重复调用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

仅将该功能 调用 ，否则事件处理程序将针对现有元素多次绑定。

你需要做的是重写它，以便委派鼠标事件并使用动态插入的元素，比如

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