full calendar - associate clickable icons with events?

Question

I want to append 4 icons each event on the calendar. Each icon should calls different function on click event. To be honest, I am not too good in CSS. I have tried the below code but the click event for these icon is not invoked. Instead events event is invoked. Is there anyway to append 4 icons with clickable event? Thank you in advance

eventRender: function(event,element,calEvent) {
    element.find(".fc-event-title").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/pass.png\" onclick=\"javascript:icons("+this.id+");\" /><img src=\"/images/pass.png\" onclick=\"javascript:icons("+this.id+");\" /><img src=\"/images/pass.png\" onclick=\"javascript:icons("+this.id+");\" /><img src=\"/images/pass.png\" onclick=\"javascript:icons("+this.id+");\" />"));
}

Answer 1

I think you need to use the .on() function to register an event handler to your icons.

Check this fiddle: http://jsfiddle.net/100thGear/rpc23/

The click events get triggered and are handled appropriately with the .on() handler. Let me know if this helps!