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+");\" />"));
}

Solution

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!

Comments

[Mahavir Munot]

@ganeshk I had used the .on() function to make the icons clickable but the issue is when I click on the icon the eventClick method of the fullcalendar plugin is also triggerd. I dont want the eventClick method to be triggered when I click on the icon that is placed on the event. Can you please shade some light on this?

[Michel Ayres]

Could you add the fiddle code into your answer? the jsfiddle is having stability issues at least for me and some other Brazilian users

[Sudarshan Kalebere]

Hi @ganeshk can you please update the fiddle with latest jquery and fullcalendar, because with new version its not working please check if you can update?...