jQueryのフォーカスイベントが重複してタブに表示される

Question

これは私が気づいた非常に奇妙なバグです。 Im .focus()イベントを使用して、トリガーするときに別のイベントに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(); 
}); 

EDITあります： これは、Firefox、この上で、Chromeのみに起こります決して起こらない！

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

}); 

ご質問はお気軽にどうぞ！