Rich-text Reply

onCreate - Execute code when an element is created

eclecto 11-10-14

onCreate - Execute code when an element is created

Hi everyone,

 

I've created a jQuery snippet to provide a new way of tackling a perennial A/B testing problem: Modifying elements that don't exist when the document initially loads.

 

There are some existing solutions for this, but I wanted to create something that was quick and easy to use and that leverages modern browser standards. Introducing onCreate:

 

https://github.com/eclecto/jQuery-onCreate

 

The minified code is compact at less than 1.5kb, and can be pasted into variation or experiment code. The syntax is simple:

 

$(parent).onCreate(selector, callback[, multi = false]);

 

  • parent: This is a container element, present on initial page load, that you know will contain the created element. It can be the document itself. It the parent object contains more than one node, only the first (index 0) will be used.
  • selector: The jQuery selector string for the child element. Whenever an element is added to the parent's subtree, onCreate will poll for the presence of the selector using $(selector, parent).
  • callback: A function to execute when a new element is created matching the selector. It will receive one argument: a jQuery object containing all of the new elements that match the selector.
  • multi: If true, onCreate will continue to poll for matching elements and execute the callback whenever a new element is detected. Elements that have already been processed by this callback will be ignored. This prevents infinite loops and other undesired behavior.

Example usage:

 

// $.onCreate() is a shortcut for $(document).onCreate()
$.onCreate('div.mymodal', function(elements) {
  elements.find('div.messagebox').html('onCreate has detected this new modal dialog.');
},true);

// onCreate allows you to attach other callbacks to the same parent/child combination, and will reuse the same MutationObserver if it can.
$.onCreate('div.mymodal', function(elements) {
elements.find('div.messagebox').append(' This is the first modal detected. No additional modals will have this message.');
});

 

Other notes:

 

  • onCreate will search for elements matching the selector when it is first called, so it is safe to use on elements that could be in the document by the time Optimizely initializes, but you're not sure.
  • onCreate attempts to use a MutationObserver to listen for element creation for minimal performance impact and instant execution. If the browser doesn't support MutationObserver it falls back on setInterval, polling every 50 milliseconds for new, unprocessed elements matching the selector.
  • At this time, onCreate does not use MutationEvents. I've decided not to use them unless there's major demand for it because they're deprecated and because they have a sizable impact on performance.
  • onCreate supports chaining. Keep in mind that the parent object will be the one returned. If the child element(s) don't exist yet--and if you're using onCreate they probably don't--attempting to return the child elements would give a zero-length jQuery object, which would make chaining useless.

Let me know if you have any question, find a bug, or have new feature requests.

 

The project is open-sourced on GitHub and released under an MIT license. I'm hoping that it will be a beneficial resource for the community, and I myself am already using it in Optimizely experiments.

Eric Newland
CROmetrics
Level 2

Amanda 11-11-14
 

Re: onCreate - Execute code when an element is created

This is really awesome. Thanks for sharing!!
Optimizely