Learning jQuery 3 - Fifth Edition

Rebinding events

Now clicking on the Narrow Column or Large Print button causes the style switcher collapsing functionality to be disabled. However, we want the behavior to return when the Default button is pressed. To do this, we will need to rebind the handler whenever Default is clicked.

First, we should give our handler function a name so that we can use it more than once without repeating ourselves:

$(() => {  const toggleSwitcher = (e) => {    if (!$(e.target).is('button')) {      $(e.currentTarget)        .children('button')        .toggleClass('hidden');    }  };  $('#switcher')    .on('click.collapse', toggleSwitcher);  $('#switcher-narrow, #switcher-large')    .click((e) => {      $('#switcher').off('click.collapse');    });});

Listing 3.20

Recall that we are passing ...