0

I have a simple script that that "progressively enhances" specific <input> elements with a draggable slider (demo of the jQuery plugin).

Additional <input> elements may be added, and the whole thing will be placed in many different scenarios (it's a pluggable frontend widget). In other words, I cannot hook onto some "Add Another Slider" button's click event, because I have no idea where those additional elements may come from (it may be a button, several buttons, some AJAX call, etc).

To handle those additional elements, currently I'm using:

// for any dynamically added elements:
setInterval(find_and_init_all_sliders_that_are_not_yet_inited, 200);

Is there a better way?

TL;DR:

I wanna run a function each time new DOM elements are added. But I have no info or control on how or where those new elements will be added.

frnhr
  • 12,354
  • 9
  • 63
  • 90
  • Event delegation is all you need. Without knowing what you want to do with the added elements it's difficult to really say much more. – Reinstate Monica Cellio Mar 24 '14 at 22:42
  • Why don't you know when these elements are added to the page? Don't you have control over your own page? – Bergi Mar 24 '14 at 23:29
  • @Bergi No I don't, because it will not be used on my page. The idea is to make a plugin ("drop-in"?) that will enhance certain `` elements. It will be used in many different scenarios on different sites. Similar to building a polyfill for, say, `` (the actual task is more specific, but the problem is the same I guess). – frnhr Mar 24 '14 at 23:47
  • The easier solution will be to let those people who have the control, and who do add the elements, explicitly call your plugin on chosen elements. – Bergi Mar 24 '14 at 23:51

0 Answers0