📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › jQuery in Practice › Event Delegation

Event Delegation

5 min read
Event delegation attaches one handler to a parent to manage events from all children, even dynamically added ones. $('#list').on('click', 'li', fn) is more efficient than adding individual handlers to every list item.

Event Delegation

Attach events to a parent to handle dynamically added children:

// Won't work for dynamic elements:
$('li').on('click', fn);

// Works for any li added later:
$('ul').on('click', 'li', function() {
  $(this).toggleClass('done');
});

Delegation is more efficient when you have many elements.