Как использовать фокус и размытие динамических вставленных элементов?

У меня есть функция:

$(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>

На странице загрузки jquery на элементах "myclass" работают отлично, но другой скрипт динамически добавляет "usil" класс div и на этом divs jquery не работает. Как это сделать?

Ответ 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/

Ответ 2

Этот код может помочь:

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

Пример использования: http://jsfiddle.net/CPQ37/