What is event delegation in jQuery and how does it work

Event delegation in jQuery is a technique that allows you to manage events for multiple elements without needing to bind event handlers individually to each element. Instead, an event handler is attached to a common ancestor of the target elements. This leverages the concept of event bubbling where events propagate up the DOM tree, allowing you to catch events at a higher level.

It is especially useful for dynamically added elements, where you can ensure that events are handled properly without needing to rebind them each time a new element is created.

$(document).ready(function() { // Attaching event handler to the parent element $('#parent').on('click', '.child', function() { alert('Child element clicked!'); }); });

Event Delegation jQuery Events JavaScript Event Handling DOM Manipulation

Related Questions

How do I avoid rehashing overhead with std::set in multithreaded code?

How do I find elements with custom comparators with std::set for embedded targets?

How do I erase elements while iterating with std::set for embedded targets?

How do I provide stable iteration order with std::unordered_map for large datasets?

How do I reserve capacity ahead of time with std::unordered_map for large datasets?

How do I erase elements while iterating with std::unordered_map in multithreaded code?

How do I provide stable iteration order with std::map for embedded targets?

How do I provide stable iteration order with std::map in multithreaded code?

How do I avoid rehashing overhead with std::map in performance-sensitive code?

How do I merge two containers efficiently with std::map for embedded targets?