Doug Cassidy
Doug Cassidy

Reputation: 1905

How to get jQuery to keep checking for an element that might get created later?

I'm trying to make a Greasemonkey script to hide a really annoying div, on a website, that pops up after a few seconds. Neither of these works:

$("#flyin").hide();
$(document).ready(function(){
  $("#flyin").hide();
});

I assume it's because the #flyin div is not created, yet. How do I tell jQuery to keep on looking for this div, maybe every n seconds, so I can hide it?

When I try to hide a non js, regular old div that is always present on the page, it works.

Upvotes: 1

Views: 366

Answers (2)

Brock Adams
Brock Adams

Reputation: 93493

There's a utility for that (waitForKeyElements).

Your whole script would simply be:

// ==UserScript==
// @name     _YOUR_SCRIPT_NAME
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements ("#flyin", hideFlyin);

function hideFlyin (jNode) {
    jNode.hide ();
}


Or, if the node only appears once per page load and the pages are not wholly changed via AJAX, use:

//-- Unload after one run.
waitForKeyElements ("#flyin", hideFlyin, true);

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

Try

(function () {
    var $el = $("#flyin").hide();
    //the element is not already created
    if (!$el.length) {
        //create an interval to keep checking for the presents of the element
        var timer = setInterval(function () {
            var $el = $("#flyin").hide();
            //if the element is already created, there is no need to keep running the timer so clear it
            if ($el.length) {
                clearInterval(timer);
            }
        }, 500);
    }
})();

Upvotes: 1

Related Questions