0

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?

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Fuxi
  • 7,611
  • 25
  • 93
  • 139
  • [jQuery.on](http://api.jquery.com/on/) lets you trigger for all elements that match a selector beneath a parent node, so you can configure events in advance but I'm not sure there's an 'on element created' or 'on child created' event. There's [jcade](https://github.com/snesin/jcade) but it sounds like this uses a planned-to-be-deprecated mechanism. – Rup May 15 '12 at 13:22

1 Answers1

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);
Community
  • 1
  • 1
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • Alternatively, here's a jQuery plugin that I just forked from your script: https://gist.github.com/4200601 ````$(selector).waitUntilExists(hideTheNews);```` – Ryan Lester Dec 04 '12 at 06:13