Jquery widget creation - html construction with events
===

I am building a sort of calendar as a jquery widget.

I'm referring to [this][1] article for guidance.

One question I have is what is the best way to attach user interaction to the calendar.

The example above is quite simple, and creates an object for the button in the _create method to which it then attaches an event handler:

    //CODE COPIED FROM EXAMPLE
    this.changer = $( "<button>", {
    					text: "change",
    					"class": "custom-colorize-changer"
    				})
    				.appendTo( this.element )
    				.button();
  
    				var that = this;
    				this.changer.bind("click.colorize", function() {
    					// _bind would handle this check
    					if (that.options.disabled) {
    						return;
    					}
    					that.random.apply(that, arguments);
    				});


I have tried to copy this style, but it seems a bit verbose when you're HTML gets more complex.

In short is there an better way of writing this:

                //MY CODE
                var hlCalctrl = $('<div class="hlCalctrl"></div>');
                var hlCalctrlTop = $('<span></span>');
                var hlCalctrlBot = $('<span></span>');
                
                var selDay = $('<div class="calimg vbD"></div>');
                var selWeek = $('<div class="calimg vbW"></div>');
                var selMonth = $('<div class="calimg vbM"></div>');
                var selToday = $('<div class="calimg vbT"></div>');
    
                hlCalctrlTop.append(selDay).append(selWeek).append(selMonth);    
                hlCalctrl.append(hlCalctrlTop);
                this.element.append(hlCalctrl);

                var that = this;
		this.selDay.bind("click", {period: 'Day'}, function(event) {
			that.selectedPeriod = event.data.period;
				});
		this.selWeek.bind("click", {period: 'Week'}, function(event) {
			that.selectedPeriod = event.data.period;
				});


etc


jsfiddle [here][2] 


  [1]: http://jqueryui.com/demos/widget/
  [2]: http://jsfiddle.net/fQ23m/