How to add onclick to Div with a specific class name?

Question

I have a few generated div's on my page listing events on a calender, they all have the same class "fc-event-inner". I would like to add a onclick to these div's but am struggling to get this right.

This is what iv tried, no onclick is added and no errors on page.

$(document).ready(function () {
  $('.fc-event-inner').each(
    function (element) {
      Event.observe("click", element, EventClick);
    }
  );

  function EventClick() {
    alert("You clicked an event")
  }

});

This is an example of a generated event div:

<div class="fc-event-inner">
  <span class="fc-event-title">Requested<br>by Santa</span>
</div>

Answer 1

Use the delegate version of on

$(document).on("click", ".fc-event-inner", function(){
   /// do your stuff here
});

This catches the click at the document level then applies the class filter to see if the item clicked is relevant.

Example JSFiddle: http://jsfiddle.net/BkRJ2/

In answer to comment:

You can access the clicked element via this inside the event function. e.g.

$(document).on("click", ".fc-event-inner", function(){
   var id = this.id;       // Get the DOM element id (if it has one)
   var $this = $(this);    // Convert DOM element into a jQuery object to do cool stuff
   $this.css({'background-color': 'red'});   // e.g. Turn clicked element red
});

*Note: You should never have to run an Each in order to catch events on multiple items that have a common class.

Answer 2

You do not need each() to bind event to elements with specific class, just selector is enough. Use jQuery on() with event delegation it will bind event to those which are generted after the binding code.

$(document).on("click", ".fc-event-inner", function(){
     alert("click");
});

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery doc.

Answer 3

<div class="fc-event-inner">
    <span class="fc-event-title">Requested<br />by Santa</span>
</div>

Your JS:

<script>   
$(document).ready(function () {
  $('.fc-event-inner').on("click", EventClick);

  function EventClick() {
    alert("You clicked an event")
  }
});
</script>

http://jsfiddle.net/UBhk9/

Some explanation:

Because you are using a class(it may be used multiple times, in contrast to an id) it will work for all the elements with this class name. The .on method will attach the event handler(in this example "click") to the selector(the class .fc-event-inner). If you want to remove events bounds you've to use the .off() method and if you only want to attach the event once you can use the .one() method.