Learning jQuery 3 - Fifth Edition

Using jQuery's delegation capabilities

Event delegation can be frustratingly difficult to manage by hand when tasks become more complex. Fortunately, jQuery's .on() method has delegation built into it, which can make life easier for us. Using this capability, our code can return to the simplicity of Listing 10.4:

$(() => {   $('#gallery')    .on('mouseenter mouseleave', 'div.photo', (e) => {      const $details = $(e.currentTarget).find('.details');      if (e.type == 'mouseenter') {        $details.fadeTo('fast', 0.7);      } else {        $details.fadeOut('fast');      }    });}); 

Listing 10.6

The selector, #gallery, remains the same as in Listing 10.5, but the event types return to the mouseenter and mouseleave of Listing 10.4. When we pass in 'div.photo' as the second argument ...