神秘的填充增加

Question

我正在学习和学习，目前正在创建验证课程。我有一个小虫子，我会问你们，你怎么看待它。

Javascript的工具提示部分

this.toolTip = function(){
var selector = $("#regForm #"+this.idName);
$(selector).focus(function(){
    tooltip = "<div class='tooltip'>"+tooltip+"</div>";
    $(selector).after(tooltip);
}); // focus

$(selector).blur(function(){
    $('.tooltip:parent').remove();
}); // blur
};

这是我写的工具提示函数，基本上我期望它做的是显示该div中的工具提示，然后不仅删除文本，还删除div。我认为它的工作完美，但css并没有这么说。

CSS的工具提示部分

.tooltip {
    display: inline-block;
    float: none;
    background: #333;
    color: #f9f9f9;
    font-size: 10px;
    padding: 5px;
}

我在CSS的经历非常糟糕，但我正在发展，我正在努力。

当我再次关注输入时，它的填充增加，当我再次点击时，它再次增加。你能帮我检查代码吗？ http://purpost.me/o/form

（作为设计，我试图复制醉意的工具提示）

这是一张错误的图片：  

提前致谢！ :)

更新

更新了 jsFiddle：http://jsfiddle.net/ThePianist/hExkP/3/

当我将CSS .tooltip的填充更改为零时，填充不会增加，但div看起来很糟糕。当我尝试<div class="tooltip"><span>'+tooltip+'</span></div>并给跨度填充属性时，它再次开始在焦点上增长..：/

Answer 1

当在表单输入内部单击时，会发生一些脚本在<div class="tooltip"><div>下面附加更多空div。因此，当您单击并单击返回时，它将注册另一个单击实例并再次附加，从而使工具提示更大。因此，它会出现与append / after部分的javascript错误。如果您在jsFiddle中弹出代码，我可以为您正确地查看解决方案：）

编辑：

从查看代码，它是以下部分：

$(selector).focus(function(){
    tooltip = "<div class='tooltip'>"+tooltip+"</div>";
    $(selector).after(tooltip);
}); // focus

这似乎引起了问题。理想情况下，它应该检查以后添加的代码是否已经存在，如果存在，则不要再次运行after函数

Answer 2

找到解决方案！我的一个朋友提请我注意这句话：

JS之前

tooltip = '<div class="tooltip '+selector.attr('id')+'T">'+tooltip+'</div>';   

我也调用了类属性tooltip，现在我用这一行覆盖了它。

JS

之后

$(selector).focus(function(){
var tooltipHTML = '<div class="tooltip '+selector.attr('id')+'T">'+tooltip+'</div>';
selector.after(tooltipHTML);
}); // focus

“问题是你正在使用变量tooltip进行多项处理。之前的代码定义了一个名为tooltip的变量，其中包含html并用于文本 +tooltip+部分使用JavaScript，您不希望像这样全局声明变量。“