Question

I am extending a jQuery UI widget using the $.widget factory. In this particular case I’m inheriting from Wijmo’s wijlinechart. I need to respond to the wijlinechart’s “painted” event from within my child class.

Consider this:

         $.widget("bw.wijlinechartcursor", $.wijmo.wijlinechart, {
             _create: function () {
                 var self = this;
                 $.wijmo.wijlinechart.prototype._create.apply(self, arguments);

                 self.element.on("painted", function (e) {
                     alert("Got painted in child via element.on"); // Doesn't get called.
                 });

                 // This works, but blows away the client code's handler (below)
                 self.options.painted = function (e) {
                    alert("Got painted in child class via options.painted!");
                 }                   

             },

             _painted: function () {
                 alert("Got painted in child via _painted");  // Doesn't get called.
             }
         });

         $("#mywijlinechartcursor").wijlinechartcursor({
             // ... stuff...
             painted: function (e) {
                 alert("Got painted in client code");
             }
         });

So what is the most effective way to handle an event down in a child class that is _trigger’ed by an inherited parent class?

Answer 1

Binding to the event with on() should work, then again that event is probably not named painted.

Each widget has its own event prefix, which defaults to the widget’s name. If your base widget is not overriding this default value, the event will be named wijlinechartpainted.

In any case, the prefix is available in the widget’s widgetEventPrefix property, so you can write:

self.element.on(self.widgetEventPrefix + "painted", function(e) {
    alert("Got painted in child via element.on");  // Should be called.
});