Work with legacy and simple sites using jQuery selectors, events, AJAX, effects, and plugins.
Lessons
Bind once to a parent for dynamically added elements.
Event Delegation is easiest to learn by reading the example, changing it, and observing the result.
// One handler on the parent works for current AND future items
$('#lesson-list').on('click', '.start-btn', function () {
const title = $(this).closest('.lesson').find('h3').text();
$('#output').text('Starting ' + title);
});
// Newly added items are handled automatically
$('#lesson-list').append('<li class="lesson"><h3>New</h3><button class="start-btn">Go</button></li>');Practice the Event Delegation example in a small scratch file, then explain what changed and why.