Widgets, adding events to newly added DOM elements

Widgets, adding events to newly added DOM elements


I'm trying to add a new element into the DOM and then attach a click
event to it that would refer back to the calling widget. Here's what
I'm doing to add the new element to the DOM and the function I want to
attach, but I can't figure out how to add the event to it.
The issue is that I have no way to reference the specific instance of
the widget from the new DOM object.
$.widget("ui.someWidget", {
_init: function() {
this.element.click(function() {
jQuery('body').append(
"<div class='foo'>Bar</div>"
);
});
},
someFunction: function() {
alert(123);
}
});
I've tried something like this:
jQuery(function() {
jQuery('.foo').click(.....);
// this of course hits ANY .foo on the page, which includes all
// instances of the widget, not the 'calling' one that I want
})
So is there some way to attach an event that can reference the
instance of the widget that actually created it?
Thanks!