How to add listener to jQuery UI Widget Factory event on widget create?

Question

I read in the link that we can have event handler when a jQuery UI widget is created using on.

https://api.jqueryui.com/jquery.widget/#event-create

$( ".selector" ).on( "widgetcreate", function( event, ui ) {} );

But when I tried in the JSFiddle like below, it doesn't work.

$.widget( "my.customwidget", {
    _create: function() {
        alert('Hi!');
    }
});
$('#widget').on('widgetcreate', function (event, ui) {
    alert('Hi again!');
});
$('#widget').customwidget();

The alert('Hi again!') doesn't get executed. Here's the fiddle.

Unless I do this.

$.widget( "my.customwidget", {
    _create: function() {
        this.element.trigger('widgetcreate');
    }
});

What did I do wrong?

The fiddle here: jsfiddle.net/petrabarus/5n5rqxkt is showing the alert. — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Feb 11, 2016 at 10:06

Community · Accepted Answer · 2017-05-23 11:59:26Z

4

The events are bound using the name of the widget itself, ie. "customwidget". Due to the inheritance model, you only have customwidget metadata, but not widget metadata. In your example, the name of the event is thus actually customwidgetcreate:

$('#widget').on('customwidgetcreate', function (event, ui) {
    alert('Hi again!');
});

Here's the updated fiddle: https://jsfiddle.net/2z06faLn/

There was a related question on a similar topic a while ago: Why is $(...).widget undefined?

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Feb 11, 2016 at 11:48

blgt

8,2151 gold badge27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Petra Barus Over a year ago

And where in the documentation states this? I just want to know whether I missed some paragraphs or pages in the documentation..

Collectives™ on Stack Overflow

How to add listener to jQuery UI Widget Factory event on widget create?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related