Question

I’m using a plugin structure like this:

(function( $, window) { 
    $.widget("mobile.multiview",$.mobile.widget, {
        options: {  
           switchable: false,           
           },
        create: function() {
           var self = this;
           // returns false
           console.log(self.options.switchable)
           },
        bindings: function() {
           $(document).on( "pagebeforechange", function( e, data ) {
              var self = this,
                  $link = self.options.switchable;
              // this is undefined, when the event fires - function fails
              console.log( $link )  
              });
           }
        }) 
     }) (jQuery,this);

I don’t understand, how the options can become undefined. I have plenty of options and they are all undefined if I console them within the pagebeforechange event.

They seem to work everywhere else, so I’m clueless as to why they are failing here. Any idea that could lead me in the right directon?

Answer 1

this will be the document instead of the widget, your scope is different.

Just re-read your code $(document).on(... var self = this. In the create method assign this to a variable that will be available elsewhere.

Some info on how to keep the context here:

How can I keep the context of 'this' in jquery

To fix this you can also just move the self declaration out of the closure:

    bindings: function() {
       var self = this;
       $(document).on( "pagebeforechange", function( e, data ) {
          var $link = self.options.switchable;
          console.log( $link ); 
       });
    }