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

}); 

有任何問題隨時問！