Is there a onAvailable() function in jQuery?

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

Use jQuery.live() instead. live() will bind event handlers when the elements are created. It requires jQuery 1.3+.

Edit: It looks like the chat div is probably isn't loaded yet, so that's still a problem. I would suggest you change your scheme somewhat. First, in your document have an area where all the chats are:

<div id="chat"></div>

and then you have:

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

The difference here is that you're adding divs with a class of chat to the chat area (which has an id of chat). Then you simply do:

$('#loader').clone().removeAttr('id').load("Views/chatBox.html").appendTo('#chat');

Answer 2

If you are adding listeners to elements that are part of the new HTML/DOM elements created on the fly you can just attach the events to those elements created as you create them using any of the jQuery event handlers that are appropriate.

If there are issues with content that's being loaded externally (like scripts/images) use the .load() jQuery event handler on those elements to detect when they are available in the DOM and can be manipulated.

As mentioned by another poster, .live() works too but might not be required if you have control over the element creation yourself - .live() adds some overhead that might be overkill.

Answer 3

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

Answer 4

Livequery will do what you want. It will

"bind events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated."