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

Question

这是我注意到的一个非常奇怪的错误。 当使用.focus()事件触发时，将div附加到另一个div。 代码是好的，它工作正常，但是当我切换选项卡（我的意思是我打开另一个网站），然后返回到我使用.focus事件上，结果重复。 如果你想看到的代码只是告诉我，但它是一个简单的事件调用一丝不挂 it.Here看中的是一些代码

<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，火狐这从不发生！

Answer 1

好吧，所以我尽我所能去尝试弄清楚你想要建立什么。如果你想尝试和详细阐述一点，我可以帮助你。这里是JSFiddle，代码如下。

除了追加divs之外，我建议你只要隐藏某个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 { 
    } 

}); 

有任何问题随时问！