jQuery小部件触发的事件未得到处理或触发

Question

I have a very simple widget outlined that appears to fire an event via _trigger that I cant seem to bind to:

; (function ($) {
    $.widget('testspace.ftpWidget', {
        options: {},
        widgetEventPrefix: 'ftpwidget:',
        _create: function () {
            var that = this;
            that.paused = ko.observable(false);
        },
        _triggerPlayerInitialized: function () {
            console.log("player initialized");
            this._trigger("testeventname", null, null);
            console.log("player testeventname supposedly fired");
        },
        pause: function () {
            this.paused(!this.paused());
            console.log("player paused");
            this._triggerPlayerInitialized();
        },
        _destroy: function () { },
        _setOption: function (key, value) { }
    });
}(jQuery));

In an html file:

<script>
   jQuery(document).ready(function ($) {
      $('#videoA').ftpWidget();
      var widget = $('#videoA').data("testspace-ftpWidget");
      console.log(widget);
      $(widget).on("ftpwidget:testeventname", function (event, data) {
          console.log("widget initialized");
      });
      widget.pause();
 });

And console output:

Why is this event not being handled / or is it not even being fired? How can I debug this?

Update:

This answer , though not my problem, gave me a hint. The OP is calling the on binding from an element body . So I changed

 $(widget).on("ftpwidget:testeventname", function (event, data) {

to

 $("body").on("ftpwidget:testeventname", function (event, data) {

and it worked, so does

 $("#video").on("ftpwidget:testeventname", function (event, data) {

So now I have it working but don't really understand why. Is it a scope "thing"? I was thinking

"I want to register for the testeventname on widget "

What's going on here?

Answer 1

_trigger itself can actually call your function. In the first parameter you're specifying the name of the callback function you want to trigger. So if you were to change:

$('#videoA').ftpWidget();

to

$('#videoA').ftpWidget({
  testeventname: function (event, data) {
    console.log("widget initialized");
  }
});

that would also work.

Jquery-UI: How to Use the Widget Factory