jQuery 'this' — Complete Guide to the Keyword in Event Handlers and Callbacks

$('.item').on('click', function() {
  // 'this' is the clicked DOM element
  console.log(this);                    // <div class="item">...</div>
  console.log(this.tagName);           // DIV

  // Convert to jQuery object for jQuery methods
  $(this).addClass('active');
  $(this).css('background', '#3498db');
});

// Multiple events
$('input').on({
  focus: function() {
    $(this).addClass('focused');
  },
  blur: function() {
    $(this).removeClass('focused');
    validateField($(this));
  }
});

$('.item').click(function() {
  // 'this' — raw DOM element
  this.style.color = 'red';                    // Native JS (faster)
  console.log(this.id);                        // Native property access

  // $(this) — jQuery wrapper
  $(this).css('color', 'red');                 // jQuery method (convenient)
  $(this).addClass('highlight');
  $(this).data('key', 'value');

  // Mixing is fine, but be consistent within a handler
  var $el = $(this);  // Cache at start of handler
  $el.addClass('clicked');
  console.log($el.data('id'));
});

// Iterating an array
$.each(['apple', 'banana', 'cherry'], function(index, value) {
  console.log(this === value); // true — 'this' is the current value
  console.log(this);           // 'apple', then 'banana', then 'cherry'
});

// Iterating jQuery collection
$('.item').each(function(index) {
  // 'this' is the current DOM element
  console.log(this);                    // DOM element
  console.log($(this).text());          // Element's text

  // Store index as data
  $(this).data('index', index);
});

// Animation callback
$('.box').slideUp(400, function() {
  // 'this' is the animated DOM element
  $(this).css('display', 'none');
  console.log('Animation finished for', this.id);
});

// AJAX callback (depends on context option)
$.ajax({
  url: '/api/data',
  context: document.body,  // 'this' will be document.body
  success: function(data) {
    console.log(this === document.body); // true
    $(this).append('<p>Data loaded</p>');
  }
});

// BAD: Arrow function changes 'this' context
$('.item').click(() => {
  // 'this' is NOT the DOM element — it's the outer scope (likely window)
  $(this).addClass('active'); // Wrong element!
});

// GOOD: Regular function expression
$('.item').click(function() {
  $(this).addClass('active'); // Correct — 'this' is the clicked element
});

// GOOD: Arrow function inside $.each (outer scope preserved)
var self = this;
$('.item').each(function() {
  // 'this' is the DOM element (regular function)
  // 'self' is the outer object
});

var MyWidget = {
  init: function() {
    this.name = 'Widget';  // 'this' is MyWidget
    $('.btn').click(this.handleClick);
  },
  handleClick: function() {
    // 'this' is the DOM element (button), not MyWidget!
    console.log(this.name); // undefined
  }
};

// Fix: use $.proxy or bind
var MyWidget = {
  init: function() {
    this.name = 'Widget';
    $('.btn').click($.proxy(this.handleClick, this));
    // OR: $('.btn').click(this.handleClick.bind(this));
  },
  handleClick: function() {
    // 'this' is now MyWidget
    console.log(this.name); // Output: Widget
  }
};

// Modern fix: arrow function in the click handler
var MyWidget = {
  init: function() {
    this.name = 'Widget';
    $('.btn').click((e) => {
      // 'this' is MyWidget (arrow inherits from init's 'this')
      console.log(this.name); // Widget
      // For the DOM element, use e.target
      console.log(e.target);
    });
  }
};

$('.list').on('click', '.item', function() {
  // 'this' is the .item element that was clicked
  // Not the .list container
  $(this).toggleClass('selected');
});

// Access the delegate (container)
$('.list').on('click', '.item', function(e) {
  var $item = $(this);
  var $list = $(e.delegateTarget); // The .list container
  var $relatedTarget = $(e.target); // The exact clicked element
});

// BAD: Re-wrapping $(this) multiple times
$('.item').click(function() {
  $(this).addClass('active');
  $(this).data('clicked', true);
  $(this).find('.child').toggle();
});

// GOOD: Cache $(this) once
$('.item').click(function() {
  var $this = $(this);
  $this.addClass('active');
  $this.data('clicked', true);
  $this.find('.child').toggle();
});