Can't call jQuery-UI function in Backbone.js view

Question

I have a web app and I use Backbone.js.

In the Login view I use jQuery UI button. In the template code I call $(".btn").button(); with no problem.

But when I want to act after the user clicks the button and call:

$('#btnSubmit').button({
   disabled : true,
   label : "Logging in..."
});

I get the error:

"Uncaught TypeError: Object [object Object] has no method 'button'"

(copied from Chrome devTools console).

The weird thing is that if I run this code lines in chromeDevtools console, it works perfectly! I think it is related to the DOM and the state I'm in when the even is firing. Any idea what is the problem?

Some details:

Including the jQuery UI library:
define([
   'jQuery',
   'jQueryui',
/*...*/
], function($, jQueryui,...) {
var loginView = Backbone.View
   .extend({
/*...*/
   events : {
      "click #btnSubmit" : "login"
      },
/*...*/
   login : function() {
      $('#btnSubmit').button({
         disabled : true,
         label : "Logging in..."
         });
   },
}
});

   return new loginView;
});

Edit:

I tried Stephen solution and tried to use:

this.$el.find('#btnSubmit').button({
     disabled : true,
     label : "Logging in..."
});

Still not working. I think it means that I can't access all jQuery UI functionality.

Answer 1

One thing to try is to look up the element like this:

this.$el.find('#btnSubmit').button({
     disabled : true,
     label : "Logging in..."
});

Even if the document isn't attached to the DOM, you'll be able to look it up. That's my only guess, as I'm assuming that all the jquery exports are setup properly.

Answer 2

I found the mistake: I should have use the jQueryUI reference I pass to the function this way:

jQueryui('#btnSubmit').button({
    disabled : true,
    label : "Logging in..."
});