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

});

有任何问题随时可以问！