JQuery element event exists

Question

Is there an event or a simple function to call a callback when a specific element exists on the page. I am not asking how to check if an element exists.

as an example

$("#item").exists(function(){ }); 

I ended up using the finished event

  $("#item").ready(function(){ }); 

Answer 1

LiveQuery The jQuery plugin seems to be used by most people to solve this problem.

Live Query takes advantage of jQuery selectors by binding events or automatically triggering callbacks for matched elements, even after the page has been loaded and updated by the DOM.

Here is a quick jsfiddle I put together to demonstrate this: http://jsfiddle.net/87WZ3/1/

Here is a demonstration of each event when creating a div and writing out a unique identifier for the newly created div: http://jsfiddle.net/87WZ3/2/

Answer 2

I had the same problem, so I went ahead and wrote a plugin for it: https://gist.github.com/4200601

$(selector).waitUntilExists(function);

the code:

 (function ($) { /** * @function * @property {object} jQuery plugin which runs handler function once specified element is inserted into the DOM * @param {function} handler A function to execute at the time when the element is inserted * @param {bool} shouldRunHandlerOnce Optional: if true, handler is unbound after its first invocation * @example $(selector).waitUntilExists(function); */ $.fn.waitUntilExists = function (handler, shouldRunHandlerOnce, isChild) { var found = 'found'; var $this = $(this.selector); var $elements = $this.not(function () { return $(this).data(found); }).each(handler).data(found, true); if (!isChild) { (window.waitUntilExists_Intervals = window.waitUntilExists_Intervals || {})[this.selector] = window.setInterval(function () { $this.waitUntilExists(handler, shouldRunHandlerOnce, true); }, 500) ; } else if (shouldRunHandlerOnce && $elements.length) { window.clearInterval(window.waitUntilExists_Intervals[this.selector]); } return $this; } }(jQuery)); 

Answer 3

Take a look at the .live function. It is executed in all current and future elements of the selector.

$ ('div'). live (function () {});