Make new list items respond to clicks with event delegation

I add a click handler to every item when the list loads, but items added later just sit there and do nothing when clicked.

IntermediateRead 4 minDoing: about 25 minutes6 steps

▶ Start

What you'll have at the end

A single click handler on the list's container that works for items added at any point

Before you start

You need

A rendered list whose items are each wired with their own click listener at creation time, plus a working way to add more items to that same list after the page has already loaded.

Not covered

Making a non-bubbling interaction, like a hover state or a focus style, behave the same way: those need a bubbling counterpart event or the capture phase instead of this pattern.

Leans on

6 steps

Where to go next

Recover a lost this inside an event handler method

when the real problem is a handler losing track of this rather than a listener never reaching a new element, that recovery is the one to reach for instead

Checked 21 Aug 2026

Part of the JavaScript cookbook