Script to fire an event as soon as an element exists?

Question

I'm trying to write a little Greasemonkey script for achieving some tasks in Facebook, like hiding news and such.

The problem is: I'm having an ID to an element which isn't existing yet in the DOM. It's the little box which appears when hitting a post's arrow-icon.

How can I create an event handler through jQuery which fires as soon as the element exists?

Answer 1

This is a common problem. You can act on AJAXed-in elements as they appear by using the waitForKeyElements() utility. (See "Fire Greasemonkey script on AJAX request" for example.)

I'm not sure what you mean by "the little box which appears when hitting a post's arrow-icon", but in general, you would:

1. Make sure your script has jQuery. Add this to the metadata section, if it's not there already:

   // @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
   

   
   

2. Require-in waitForKeyElements:

   // @require https://gist.github.com/raw/2625891/waitForKeyElements.js
   

   
   

3. Write your handler function and activate it:

   function hideTheNews (jNode) {
       //***** YOUR CODE HERE *****
       jNode.hide (); // For example
   }
   
   waitForKeyElements ("*APPROPRIATE jQuery SELECTOR*", hideTheNews);