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');
});

http://stackoverflow.com/questions/1387464/how-to-do-something-when-available-with-jquery — bastianneu, Sep 07 '09 at 09:54

cletus · Answer 1 · 2009-09-07T03:47:44.897

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');

Just check the documentation... Last time I checked, not all of the events you can hook into normally are available using live(). — Dave Markle, Sep 07 '09 at 03:28

score 0 · Answer 2 · answered Sep 07 '09 at 03:23

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.

No,directly attach the events won't work,I've pasted my code here. — omg, Sep 07 '09 at 03:35

score 0 · Accepted Answer · answered Sep 07 '09 at 03:49

0

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

answered Sep 07 '09 at 03:49

PetersenDidIt

25,562
3
67
72

Live only supports a short list of events. focus is not one of them. The jquery docs are your friend: http://docs.jquery.com/Events/live#typefn – PetersenDidIt Sep 07 '09 at 04:21

score 0 · Answer 4 · answered Sep 07 '09 at 03:53

0

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."

answered Sep 07 '09 at 03:53

ez.

7,604
5
30
29

Is there a onAvailable() function in jQuery?

4 Answers4

Linked