jQuery·jQuery from selection to migration

Events and delegation

Attach, remove and delegate events for dynamic content.

Beginner 13 min read Lesson 4 of 300 Challenge included

What you will be able to do

Use .on("click", handler).
Delegate with .on("click", ".row", handler).
Use .off to remove handlers.
Use .trigger only for intentional custom events.

In plain English

jQuery’s .on attaches handlers and supports delegation through a selector. Delegation keeps one listener on a parent, so it works for rows added later. Use .off to remove a specific handler.

events.jsJavaScript

$('#list').on('click', '.row', function () {
  $(this).toggleClass('is-selected')
})

$('#save').on('click', () => console.log('saved'))

Your turn

Delegate a click

Medium

Bind a click handler to #list that matches .row and toggles .active.

JAVASCRIPT · starter

$('#list').on()

Check your understanding before moving on.

Knowledge checkQuestion 1

Why use delegated events?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Effects and animation

Lesson 4 of 300 · 0% of course