how to declare js event and function to every dom element with given tag and class even when these elements don't exist at the moment?

Question

I need to 'decorate' every div.myclass with a function in a way that css is doing it with style, that is some of these elements aren't on a page when this function fires, so I can't just find and loop trough them. Some of the elements are created from ajax requests, and some are changing classes.

In css when an element changes class it's style changes instantly. I also need a similar situation here when for example all divs with class1 would have declared one function and with class2 another, and when I do for example:

document.getElementsByClassName("class1")[0].setAttribute("class", "class2");

Behavior of that element should change instantly.

I prefer pure js, but if it's there a cleaner jquery or prototype way I also be glad.

score 3 · Accepted Answer · edited May 23 '17 at 11:56

3

Future Readers: .live() is deprecated and should no longer be used! In the previous cases where it was used .delegate() is a more preferable method.

https://stackoverflow.com/a/11115926/829835 here is what is wrong with .live()

The jQuery team itself also suggests this function is no longer used.

edited May 23 '17 at 11:56

Community

1
1

answered Jul 11 '12 at 12:37

rlemon

17,518
14
92
123

And in fact, .on() is now (as of jquery 1.7) the recommended replacement for bind(), live() and delegate(). For removing, use .off(), and for an event that will only execute once, use .one() – Matt Sach Dec 03 '12 at 18:04
yes, .on() and .off() are preferred methods for event delegation. Older jQuery (pre 1.7) should of course rely on .delegate() – rlemon Dec 05 '12 at 19:54

score 1 · Answer 2 · answered Jun 01 '11 at 10:57

1

Check http://api.jquery.com/live/

"The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation[...]"

answered Jun 01 '11 at 10:57

Giuseppe Romagnuolo

3,362
2
30
38

score 1 · Answer 3 · answered Jun 01 '11 at 10:58

1

I guess you need jQuery's live():

http://api.jquery.com/live/

answered Jun 01 '11 at 10:58

Evgeny Shadchnev

7,320
4
27
30

how to declare js event and function to every dom element with given tag and class even when these elements don't exist at the moment?

3 Answers3