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

Question

这是我注意到的一个非常奇怪的错误。 我使用.focus() 事件在触发时将 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();
});

编辑： 这只发生在 chrome 上，在 Firefox 上永远不会发生！

Answer 1

好的，所以我尽我最大的努力尝试找出您要构建的内容。如果您想尝试并详细说明，我可以为您提供帮助。这是JSFiddle，代码就在下面。

我建议您不要添加 div，而是隐藏某个 div，然后在触发焦点功能后显示数据。

HTML

​​​​​​​​​​​​​​​<form>
   <input type="text" name="firstname" />
   <div class="append-div">Try This Out !</div>             

   <input type="text" name="lastname" />        
   <div class="append-div">Try This Out !</div>
</form>

CSS

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

jQuery

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

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

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

   } else {
   }

});

​ 有任何问题欢迎随时提问！