How can I handle clicks on items added to a list later?

A handler attached directly to an item only covers the items that existed when you attached it. Instead, put one listener on a parent that remains in the page, such as the list. Click events bubble from nested elements to their ancestors, so the parent can handle clicks from existing items and items added later. [S1]

Inside the listener, identify whether the click happened on an item you care about. If an item contains a child element, such as a button or icon, look for the nearest matching item above the click target rather than assuming the target itself is the item.

This example adds one listener to the list. Clicking an item updates the message, and the Add button creates another item inside the same list. The new item needs no separate click listener.

<ul id="items">
  <li class="item"><button type="button">First item</button></li>
  <li class="item"><button type="button">Second item</button></li>
</ul>
<button id="add" type="button">Add an item</button>
<p id="message" aria-live="polite">Choose an item.</p>

<script>
  const list = document.querySelector('#items');
  const addButton = document.querySelector('#add');
  const message = document.querySelector('#message');
  let count = 2;

  list.addEventListener('click', (event) => {
    if (!(event.target instanceof Element)) return;

    const item = event.target.closest('.item');
    if (!item || !list.contains(item)) return;

    message.textContent = `Selected: ${item.textContent.trim()}`;
  });

  addButton.addEventListener('click', () => {
    count += 1;
    const item = document.createElement('li');
    item.className = 'item';
    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = `Item ${count}`;
    item.append(button);
    list.append(item);
  });
</script>

closest('.item') checks the event target and then its ancestors until it finds a match. [S2] The example’s containment check ensures the matched item belongs to this list, not some other part of the page.

The selector finds a match but does not, by itself, restrict that match to this particular list. The containment check rejects a match that is outside the list handling the event. [S2]

Yes, clicking the button works: the event target may be the button, and closest('.item') walks up to its matching <li>. The example also checks that the target is an Element before calling closest().

Confirm that the listener is attached to the parent containing the items and that your selector matches the intended item. Also check that the click event reaches the parent: if another handler stops propagation, the parent may not receive it. [S1]

The reusable pattern is:

parent.addEventListener('click', (event) => {
  if (!(event.target instanceof Element)) return;

  const match = event.target.closest('.your-item-selector');
  if (!match || !parent.contains(match)) return;

  // Handle this matching item.
});

Replace parent, .your-item-selector, and the comment with your elements and action. Delegation depends on the event reaching the parent. [S1]