Javascript - best way to handle post-load generated content

Question

I've been wondering how to efficiently and generically process content that is generated after any user action.

For instance, let's say my script processes all paragraphs of Facebook at page load in order to make them blink. What would be the most responsive way to make the text that is displayed later (because of infinite scroll eg) blink ?

Thanks in advance for your ideas,

Rolf

Answer 1

Personally, I define a function called dom_mods() that modifies the page in order to apply any special effects such as autocompletion, default value for <select> , auto-resizing textareas and so on. Whenever I add content to the document, I call dom_mods() .

The only catch is to make sure you don't affect the same elements twice, or if you do it needs to not make a difference. For instance, there might be a class that defines a set of elements to affect, so the class should be removed by dom_mods() so it doesn't get the treatement twice.

Answer 2

You would add the blink function to the parent object that would encompass all the children.

In other words if you use jquery you would specify the event selector as (".parent .child") when registering the child blink event. This way, you don't need to register any additional jquery "dom_mods" function or call anything else which wastes memory and time.