public
Last active — forked from BrockA/waitForKeyElements.js

jQuery plugin which runs handler function once specified element is inserted into the DOM

  • Download Gist
jquery.waituntilexists.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
(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));

Thank you, Thank you, Thank you. I'm a total JS/Jquery noob and this issue was driving me crazy. I've got a project where I'm dynamically creating a element and then trying to use .change() to do things when are selected. The builds just fine and the .change() code looked good but it wouldnt work. Injected your waitUntilExists function and it works like a charm. Now I can stop beating my head on the keyboard wondering what's not working.

Hi, thank you for this great plugin. But how it is possible to run the function not only once, but every time.
I used it in the flexslider plugin to find out when a slider is active and then add a special class to the navigation.

my code:

var secondSlide =$("#secondary-slider li:eq(1).flex-active-slide");
var next2 = $('#home .flex-direction-nav li:eq(1) a');

$(secondSlide).waitUntilExists(function() {
next2.addClass('flex-disabled')
});

This works fine, but only at once.

I forked and improved on your code a bit, if you want to pull in some or all of my changes. Thanks!

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.