I recently developed my first jQuery UI Custom Widget using the jQuery UI Widget Factory. I found the Widget Factory to be a nice framework for what I needed to do and took away a bit of the complexity normally needed for a UI plugin.

It did introduce a level of complexity for live event binding. For example, I want all dynamically generated anchor tags to run a method when clicked.

The Widget Factory wants us to use the “this._on” method to accomplish this. The Widget Factory is a little undocumented so it was hard to figure this one out.

At first I tried the following:

$.widget( "CFWT.myWidget", {

	_create: function() {
		this._on('.myClass', {
			click: function(event) {
				var $container = $(event.target);
				doSomething($container);
			}
		});
	}
	
	_doSomething: function(container) {
		console.log(container);
	}

});

However I quickly found out that the event was only bound with any classes created the first time. After some Q&A on Stack Overflow I finally figured out the correct way.

$.widget( "CFWT.myWidget", {

	_create: function() {
		this._on(this.element, {
			'click.myClass': function(event) {
				var $container = $(event.target);
				this._doSomething($container);
			}
		});
	}
	
	_doSomething: function($container) {
		console.log($container);
	}

});

This new code will bind any “myClass” class that is created inside the widget’s container. If you want it document wide then replace “this.element” with “document” or another container.

You may also notice that I use “$(event.target)” instead of “this”. That is because “this” doesn’t change to the event. Instead, I believe, it remains at the widget level, which can be pretty confusing.

A working example can be found at http://jsfiddle.net/vEAhq/8/

#bind, #event, #jquery, #live, #ui, #widget