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: ```

Requested
by Santa

```

Accepted Answer

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.

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

Solution

Problem