javascript函数的重复调用正在创建冲突

我正在使用下面的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 })
    });
}

函数工具提示（）{
$（'.master_工具提示'）。悬停（函数（）{
//悬停在代码上方
var title=$（this.attr（'title'）；
$（this.data（'tipText'，title.）.removeAttr（'title'）；
$（“
”）
.正文（标题）
.appendTo（'正文'）
.fadeIn（“慢”）；
}，函数（）{
//悬停代码
$（this.attr（'title'，$（this.data（'tipText'））；
$（'.tooltip'）.remove（）；
}).mousemove（函数（e）{
var mousex=e.pageX+20；//获取X坐标
var mousey=e.pageY+10；//获取Y坐标
$（“.tooltip”）
.css（{top:mousey，left:mousex}）
});
}

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

您需要做的是重写它，以便它委托鼠标事件并处理动态插入的元素，如下所示

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

函数工具提示（）{
$（文件）({
mouseenter:function（）{
var title=$（this.attr（'title'）；
$（this.data（'tipText'，title.）.removeAttr（'title'）；
$（'
）。文本（标题）
.appendTo（'正文'）
.fadeIn（“慢”）；
},
mouseleave:function（）{
$（this.attr（'title'，$（this.data（'tipText'））；
$（'.tooltip'）.remove（）；
},
鼠标悬停：功能（e）{
var mousex=e.pageX+20；//获取X坐标
var mousey=e.pageY+10；//获取Y坐标
$（'.tooltip'）.css（{top:mousey，left:mousex}）
}
}，“.master_工具提示”）；
}

一把小提琴就好了。我想看看所有相关的代码我猜你调用函数两次，在ajax内容加载后又调用了一次？@adeneo你是对的。我叫它两次甚至更多。因为，否则通过ajax调用接收的数据不会受到这个toltip函数的影响。有一个解决方案，它叫做事件委派，我在下面概述了它。谢谢，但是在这个问题上，我遇到了错误。我的firebug控制台显示以下错误-

ReferenceError:e未定义错误源行：var mousex=e.pageX+20//获取X坐标

我所做的是，就像我调用Jquery中的工具提示函数$（function（）{}）之前一样。知道我哪里搞砸了吗？哦，只是忘了添加事件参数，修正了Nowowooo。。它现在正按照预期的方式工作。非常感谢。：）