Add onclick event on various elements on the basic of CSS class

Question

I have various elements on a single page. They share a single class. I want to add a onclick event on all those elements using prototype.

For id I can do something like this:

Event.observe(window, 'load',
   function() {
$('id_of_the_element').addEventListener('onclick',any_function,true);
  }
);

This is good if we have id of the element. I want to do the same using CSS class, cause all the element share same class.

Update:

document.observe("dom:loaded", function() {
   $$('.message').invoke('observe', 'click', hide_all_messages)
});

function hide_all_messages()
{
$$('.message').hide();
}

This is not working.

error:

hide is not a function

remi bourgarel · Accepted Answer · 2010-09-14 12:04:48Z

1

$$('.myClass').each(
  function(element){
    Event.observe("click",element,any_function);
}
);

you got it !

answered Sep 14, 2010 at 12:04

remi bourgarel

9,4494 gold badges46 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

remi bourgarel Over a year ago

$$(".message").invoke("hide")

robjmills · Accepted Answer · 2010-09-16 15:38:13Z

1

a more succinct solution would be to use invoke:

$$('.elements').invoke('observe', 'click', yourfunction)

You can set this to run when the dom is ready by placing it within this code:

document.observe("dom:loaded", function() {
    $$('.elements').invoke('observe', 'click', yourfunction)
});

EDIT - this will fix your other issue:

function hide_all_messages(){
    $$('.message').invoke("hide");
}

edited Sep 16, 2010 at 15:38

answered Sep 15, 2010 at 9:46

robjmills

18.6k16 gold badges81 silver badges124 bronze badges

Collectives™ on Stack Overflow

Add onclick event on various elements on the basic of CSS class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related