Learning jQuery 3 - Fifth Edition

Using built-in event delegation capabilities

Because event delegation can be helpful in so many situations, jQuery includes a set of tools to aid developers in using this technique. The .on() method we have already discussed can perform event delegation when provided with appropriate parameters:

$(() => {  $('#switcher-default')    .addClass('selected');  $('#switcher')   .on('click', 'button', (e) => {     const bodyClass = e.target.id.split('-')[1];     $('body')       .removeClass()       .addClass(bodyClass);     $(e.target)       .addClass('selected')       .siblings('button')       .removeClass('selected');     e.stopPropagation();   })   .on('click', (e) => {     $(e.currentTarget)       .children('button')       .toggleClass('hidden');   });});

Listing 3.17

This is looking pretty good now. We have two ...