jQuery event when element is created

Question

I'd like to trigger an event when an element is created.

$(document).on('load','#TB_title',function() {
    console.log('loaded');
});

Is there an equivalent of this that works?

I saw some people suggest livequery, but that seems heavy.

Thanks.

Answer 1

I don't think such thing exist directly, but you can handle the DOMSubtreeModified event and wait until you can find element with such ID:

var _elementToFind = "TB_title";
var _elementFound = false;
var _counter = 1;
$(document).bind("DOMSubtreeModified", function(evt) {
    if (_elementFound)
        return;
    if ($("#" + _elementToFind).length > 0) {
        alert("element '" + _elementToFind + "' created");
        _elementFound = true;
    }
});

Live test case.

The downside is that it's not supported by Opera and IE less than 9 - see here the full details.

Answer 2

You can trigger a global custom event:

$(document).on('load','#TB_title',function() {
  $.event.trigger('nameOfCustomEvent');  
});

$('#element').bind('nameOfCustomEvent', function(){
  console.log(this);
});