Question

I’ve been having issues with on/off removing event handlers that I don’t want to, and would like to namespace the event binding with the html element’s expando id.

function SomeWidget(el) {
   $(document).on('handler.MY_EXPANDO_ID', this.handler.bind(this));
};
var widget = new SomeWidget($(sometargetelement));

The problem with not having a unique identifier, is that currently I have namespaces the same, which screws up when I have two widgets of the same time, and one removed, it removed the handler for both objects.

Question 1) How do I access an elements’ internal expando id?
Question 2) Is there a better way to do this? Function.bind !== Function, which makes removing based on the actual method pointer not possible

I’m using jQuery 1.8.3

Answer 1

jQuery UI’s widget factory increments a counter whenever a widget is created. Then they have an eventNamespace property available for exactly this reason. You could accomplish the same type of thing:

function SomeWidget(el) {
    SomeWidget.instances++;
    var eventNamespace = ".SomeWidget" + SomeWidget.instances;

    $(el).on("handler" + eventNamespace, ...);
}
SomeWidget.instances = 0;

This will increment the instances whenever a new SomeWidget is created. Internally it will have access to an eventNamespace that can be used for binding / unbinding events.

If you needed access outside of your widget, you could store the eventNamespace as data on the element:

$(el).data("eventNamespace", eventNamespace);

However, this would be overwritten if you created multiple instances of the widget with the same element.