.append issues。制限.append

Question

単純なhtmlテキストボックスを.keypress(funcion(){...}に接続すると、キーボードのキーを押すたびにjqueryアイコンが表示されます。これは、アイコンをクリックするとユーザーの入力を保存するように、入力がテキストボックスに入力されたときにjquery UIアイコンが表示されるようにすることです。しかし、我々はすべて、コンピュータ言語が文字通りの傾向があることを知っています。キーを押すたびに...新しい保存アイコンが毎回表示されます...毎回。私がこの部分で立ち往生しているので、私を助けてください。

P.S. jqueryのUIのアイコンのために、それにホバー機能を持っている..私は.appendの内側にアイコン

<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div>

を入れたときに、（したがって、一つの色を滞在し、ホバーを無効にします）表示されたら、それは無効になります。この知識があなたのことであれば、それが追加から来ているときにホバーを有効にして、あなたが共有したいと思っているなら、かなりクールでしょう。

 $(".solo1").keypress(function() { 
     $("#kyo").append('<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div><br />'); 
    }); 
</script> 
<div id="kyo"> <input class="solo1" /> </div> 

Answer 1

ページの読み込み時にすべてのボタンを作成し、キーを押すと適切なボタンが表示されます。ボタンをクリックすると再び非表示になります：http://jsfiddle.net/jC7TR/1/。

$('.solo1').after('<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div><br />') 
.keypress(function() { 
    $(this).next('.saveButton').show(); 
}); 

$('.saveButton').hide().click(function() { 
    $(this).hide(); 
}); 

Answer 2

代わりのkeypressに、彼らはテキストボックスから離れてクリックした後、あなたはアイコンが表示されるようにするには.blur()を使用することができますか？

Answer 3

いくつかのオプションがあります。最初に、キーを押すとボタンを追加するのが少し頻繁になるようです。 .changeや.blurなどの別のイベントにボタンを追加することもできます。あなたの現在のコードで言われていることは、ボタンがすでに存在するかどうか、それが追加されないかどうかを確認することだけです。

$kyo = $("#kyo"); 
if($kyo.find('.saveButton').length === 0) // if button doesn't exist 
    $kyo.append('<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div><br />');