$(this) in JavaScript Module Pattern

Question

I'm trying to use the Javascript module pattern for the first time to organize my code. I understand the how "this" works here but cannot figure out how $(this) works. For example, the code below, $(this).addClass('video-active'); in "chooseVideo" function, I want to apply addClass only for the clicked element. But it does not work. Could anybody give me some advice? Thank you!

;(function() {
   'use strict';
   if (typeof window.jQuery !== 'function') {
     return;
   }
   var $ = jQuery;

   var video = {
     init: function() {
       this.cacheDom();
       this.bindEvents();
       this.render();
     },
     cacheDom: function() {
       this.$el = $('#videoWrap');
       this.$button = this.$el.find('.video');
     },
     render: function() {

     },
     bindEvents: function() {
       this.$button.bind('click', this.chooseVideo.bind(this));
     },
     chooseVideo: function(e) {
       e.preventDefault ? e.preventDefault() : e.returnValue = false;
       this.$button.removeClass('video-active');
       $(this).addClass('video-active');
     }
   };

   video.init();

})();

$(this) is the standard way of wrapping something like a DOM element in the jQuery handler. — tadman
– tadman, Commented Mar 22, 2016 at 3:25
It better be if you're calling addClass on it. Remember this changes wildly from function to function. — tadman
– tadman, Commented Mar 22, 2016 at 3:27

epascarello · Accepted Answer · 2016-03-22 03:27:41Z

2

when you use bind, you are changing the context of this

So you will need to use the event object to get what was clicked.

chooseVideo: function(e) {
   e.preventDefault ? e.preventDefault() : e.returnValue = false;
   this.$button.removeClass('video-active');
   $(e.target).addClass('video-active');

answered Mar 22, 2016 at 3:27

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

shinyatk Over a year ago

Thank you so much! I was struggling this issue for a few hours! You save my day! Really appreciate it!

Collectives™ on Stack Overflow

$(this) in JavaScript Module Pattern

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related