javascript - 神秘的填充增加

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 的 padding 更改为零时，padding 没有增加，但 div 看起来很糟糕。当我尝试 <div class="tooltip"><span>'+tooltip+'</span></div>并给 span 填充属性，它又开始在焦点上增长 .. :/

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 之后的代码是否已经存在，如果存在，则不要再次运行 after 函数