jQuery plugin with extend doesn't take user params

Question

I'm writing a jQuery plugin that makes containers (e.g. a div) of a hyperlink clickable.

I would like it for the user to be able to change some basic parameters.

However I must be doing something wrong, because it always uses the default param and not the user defined one.

I try the overrule the cursor.

The fiddle.

The code:

(function($){
 $.fn.clickablecontainer = function() {
    return this.each(function(options) {

        var defaults = {  
            cursor: 'pointer',
            hoverclass: 'hover',
            activeclass: 'active'
            //ellipsisText: "..."  
        };  
        var options = $.extend(defaults, options);          
        var elem = $(this);
        elem.css('cursor', options.cursor);
        $('a', elem).css('cursor', options.cursor);        

        elem.hover(function() {
            elem.addClass(options.hoverclass);
        }, function() {
            elem.removeClass(options.hoverclass);
        });

        elem.mousedown(function() {
            elem.addClass(options.activeclass);
        });

        $('body').mouseup(function() {
            elem.removeClass(options.activeclass);
        });        

        elem.click(function() {            
            var target = $('a', elem).attr('target');
            var href = $('a', elem).attr('href');            
            switch(target) {
                case '':
                case '_self':                    
                    location.href = href;
                    break;
                case '_blank':
                    window.open(href);
                    break;
                case '_parent':
                    parent.location.href = href;
                    break;
                case '_top':
                    top.location.href = href;
                    break;
                default:
                    alert('frame');
                    top.frames[target].location = href;
            }
        });
    });
 };
})(jQuery);

$('document').ready(function() {
    $('.container div').clickablecontainer({
        cursor: 'help'
    });
});

Finished product (special thanks to tvanfosson :) ): fiddle

Answer 1

You have two definitions of options, since you use var to redeclare it. I suspect this results in the options on the right-hand side being an empty object. It would be better to simply use:

  options = $.extend({},defaults,options);

This will keep defaults intact, yet allow the values in options to override them, then reassign to the original options variable.

You also need to move the definition of the options to the outer function, otherwise you aren't actually getting any values.

$.fn.clickablecontainer = function(options) {
    var defaults = {  
        cursor: 'pointer',
        hoverclass: 'hover',
        activeclass: 'active'
        //ellipsisText: "..."  
    };  
    options = $.extend({},defaults, options);  

    return this.each(function() {
        var elem = $(this);
        ...