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>

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>

• javascript
• jquery
• html
• onclick

• I would strongly suggest providing a JSFiddle for this, so you can see the examples working. – iCollect.it Ltd Commented Feb 25, 2014 at 9:36
• No errors on the page? Event.observe is not a standard JS or DOM method, and it's not jQuery either. I get the error TypeError: Event.observe is not a function: jsfiddle/JaVBF – Felix Kling Commented Feb 25, 2014 at 9:38
• Thanks some of the answers below are working, Is there no way to also id the div clicked? – Pomster Commented Feb 25, 2014 at 9:43
• I really remend to read the jQuery tutorial about basic event handling. It has the answers to your questions. – Felix Kling Commented Feb 25, 2014 at 9:46

3 Answers 3

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/BkRJ2/

In answer to ment:

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 mon class.

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.

<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/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.