Question

After inserting new html to DOM,I need to add some listeners to it.

But the new elements are not available at once.

My code:

$('#loader').clone().removeAttr('id').load("Views/chatBox.html").appendTo('body');
$('#chat')
    .focus(function() {
        $(this).addClass('jV');
    })
    .blur(function() {
        $('#chat').removeClass('jV');
    });

Which is not working .

Using live() still not working:

$('#chat').live('focus',function() {
    $('#chat').addClass('jV');
})
.live('blur',function() {
    $('#chat').removeClass('jV');
});

Answer 1

If #chat is in the chatBox.html that you are loading then you can take advantage of the callback that load has:

$('#loader').clone().removeAttr('id').load("Views/chatBox.html",function(){
    $('#chat').focus(function() {
        $(this).addClass('jV');
    })
    .blur(function() {
        $('#chat').removeClass('jV');
    });
}).appendTo('body');

http://docs.jquery.com/Ajax/load#urldatacallback