jquery - 動的に挿入された要素にフォーカスとぼかしを使用する方法は?

Question

私は機能を持っています：

$(document).ready(function(){

    $("input.myclass").focus(function() {
        // something
    }).blur(function() {
        // something
    });

}

およびhtml：

<div class="usil">
    <div class="editable">
        <form>
            <input type="text" class="myclass" />
        </form>
    </div>
</div>

「myclass」要素の読み込みページ jquery は正常に動作しますが、他のスクリプトは動的に「usil」クラス div を追加し、この div では jquery は機能しません。どうやってするの？

Answer 1

イベント委任を使用します。

    $(document).on('focus',"input.myclass", function() {
        // something
    }).on('blur',"input.myclass", function() {
        // something
    });

また

$(document).on({
    'focus': function () {
        // something
    },
    'blur': function () {
        // something
    }
}, 'input.myclass');

http://api.jquery.com/on

http://learn.jquery.com/events/event-delegation/

Answer 2

そのコードは役立ちます：

$('input').live('focus', function() {
    $('label span').text('focus');
}).live('blur', function() {
    $('label span').text('blur');
});

使用例： http: //jsfiddle.net/CPQ37/