Question

I know this should be basic but for the life of me….

eventMouseover: function(calEvent, domEvent) {
    if (typeof calEvent.id != 'undefined'){
        var layer = "<div id='events-layer' class='fc-transparent' style='position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100'> <a> <img border='0' style='padding-right:5px;' src='/icon_note_delete.png' width='16' onClick='deleteEvent("+calEvent.id+");'></a></div>";
        $(this).append(layer);
    }
}

The part that isn’t working is

onClick='deleteEvent("+calEvent.id+");

Since the id will be a string not a number I need to quote it.

as is it is giving me

onClick="deleteEvent(e_1984_2_184_668)"

but I need

onClick="deleteEvent('e_1984_2_184_668')"

I have tried

onClick='deleteEvent(\'"+calEvent.id+"\');

but it didn’t work either. I know this is something stupid that I am missing but help is much appriecated!

Answer 1

You should use double-quotes to surround calEvent.id, because it’s within a single quote string:

var layer = "<div id='events-layer' class='fc-transparent' style='position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100'> <a> <img border='0' style='padding-right:5px;' src='/icon_note_delete.png' width='16' onClick='deleteEvent(\""+calEvent.id+"\");'></a></div>";

However, it would be easier and more readable in my opinion if you used a chain of jQuery calls to create your HTML instead:

var layer = $('<div></div>').attr('id', 'events-layer')
                .addClass('fc-transparent')
                .css({
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                    top: '-1px',
                    textAlign: 'right',
                    zIndex: '100'
                })
                .appendTo(this);

var anchor = $('<a></a>').appendTo(layer);

var img = $('<img>').attr('border', '0')
                    .attr('src', '/icon_note_delete.png')
                    .attr('width', '16')
                    .css({
                        paddingRight: '5px'                        
                    })
                    .click(function() { deleteEvent(calEvent.id); })
                    .appendTo(anchor);