Question

I’m trying to use Boostrap’s button.js with Meteor but it’s not really working out the way I expect.

The following method is used to handle a login event:

Template.login_form.events['click #login-button'] = function (evt, tmpl){
     console.log($('#'+evt.target.id));
     console.log([evt.target]);
     console.log($('#'+evt.target.id).button('loading'));
     console.log(evt.target.button('loading'));
};

The first two methods return exactly the same thing, an array with the #login-button DOM-element. However, looking at the second two calls only the one using JQuery lookup will work.

Am I missing something when it comes to Bootstrap, JQuery or JS in general or is this a Meteor quirk?

Answer 1

The bootstrap button method is only available on jQuery objects, not plain DOM objects. So, this has nothing to do with Meteor.js. Your last example could look like the following:

console.log($(evt.target).button('loading'));

Edit: By the way, the following two lines are not equivalent either:

 console.log($('#'+evt.target.id));
 console.log([evt.target]);

The latter returns a plain array, while the jQuery function $ returns a special jQuery collection, which, among other things, provides the button method.