jQuery、動的入力要素にフォーカスメソッドをバインドします

Question

私はログインフォームを持っています。これには単純なテキストボックスが含まれていて、テキスト 'パスワード'を表示します。ユーザーがボックスをクリックすると、つまりフォーカスイベントで、テキストボックスhtmlをパスワードボックスhtmlに置き換えます。同じHTML IDで、他のすべてのものと同じです。

ただし、この変更後、フォーカスイベントは同じIDを持っていても、パスワードボックスではもう機能しません。私は余分な何かをする必要がありますか？パスワードボックスのようなバインド機能。いくつかのコードスニペットでそれを行う方法を教えてください。ありがとう。ここで

は私のコードです：

$(".login_fields input") 
    .focus(function (e) { 
     $(this).parent().html('<input type="password" value="" id="admin_password">'); 
     $(this).val(''); 
    }) 

Answer 1

は、バインドの代わりに住んで使用してみて、要素を結合した後に追加されたため、それに添付なしイベントハンドラを持っていない：

$('#myTextBox').live('click', function() { 
    // Live handler called. 
}); 

ここでの参照があります：ここでは

http://api.jquery.com/live/

はprobabですあなたのためのソリューション：

$(".login_fields input").live("focus", function(){ 
     $(this).parent().html('<input type="password" value="" id="admin_password">'); 
     $(this).val(''); 
}); 

Answer 2

.live()これは最も簡単な解決策ですが、パフォーマンスは最悪です。 .live（）を使用すると、発生したすべてのクリックに対してイベントリスナーを追加し、そのクリックが入力にあるかどうかを確認することを意味します。お勧めしません。

.delegate()を使用すると、入力があるドキュメントの特定の部分だけを聞くことができます。デリゲートは、ライブと同じで、注入された要素

$('.login_fields').live('.login_fields input', 'click', function() { 
    // your code 
}); 

DCSのために動作します：私は私のポストを編集し、自分のコードを追加http://api.jquery.com/delegate/