jQuery焦点事件在选项卡更改时重复

我注意到这是一个非常奇怪的错误。 我使用

.focus（）

事件在触发时将div追加到另一个div。 代码正常，工作正常，但是当我切换选项卡（我的意思是打开另一个站点），然后返回到我使用的

.focus

事件时，结果会重复。 如果您想查看代码，请告诉我，但这是一个简单的事件调用，没有任何花哨的内容 这是一些代码

<div id="song">
   <input type="text" id="post_title" name="title" value="Artist - Song" /><br />               
</div>

   var songSuggestion = '<div id="titleSuggest" style="width:270px; background:#37819d; color:white; margin:0 auto; ">Try this!</div>';

$('#post_title').focus(function(event){ 
    $(this).parent().append(songSuggestion);
    });

$('#post_title').blur(function(){
    $(this).parent().find('#titleSuggest').remove();
});

var songSuggestion=‘试试这个！’；
$（'post_title'）。焦点（函数（事件）{
$（this.parent（）.append（songSuggestion）；
});
$（'#post_title'）.blur（函数（）{
$（this.parent（）.find（“#titleSuggest”）.remove（）；
});

编辑：

---

这只发生在chrome上，在firefox上永远不会发生

好吧，所以我尽了最大的努力，想弄清楚你想要建立什么。如果你想再详细一点，我可以帮你。下面是代码，代码就在下面

我建议您不要附加div，而是隐藏某个div，然后在启动focus函数后显示数据

HTML

JQuery

$("input").focus(function() {

   if ($(this).next(".append-div").is(":hidden")) {

      $(this).next(".append-div").show();

   } else {
   }

});

​

---

有什么问题尽管问吧

因此，如果yu有3个文本框，则第三个文本框将调用3次。你现在有主意了。是否用我的代码示例更新了itI。是的，我也考虑过这一点，但我希望div是动态创建的（检查我的代码），这是我通常建议使用服务器端脚本（PHP、Python、Ruby）的地方，但我可以尝试找出一个只使用JQuery的方法。如果我错了，请纠正我，但你不能这样做-->

html { margin: 10px; }

input { 
  border: 1px solid #000; 
  padding: 3px 7px; 
  width: 200px; 
  margin-top: 10px; 
  display: block; 
}

.append-div { 
  width: 200px; 
  padding: 3px 7px; 
  height: 15px; 
  background-color: #999; 
  border: 1px solid #2d2d2d; 
  margin-bottom: 20px; 
  display: none; 
  color: #000; 
}

$("input").focus(function() {

   if ($(this).next(".append-div").is(":hidden")) {

      $(this).next(".append-div").show();

   } else {
   }

});