How to use event delegation in jQuery

This approach is particularly useful when you have a list or a set of elements that you want to handle in a similar way, without setting up individual event handlers for each element.

Why you should use event delegation?

Event delegation offers several benefits:

1. Efficiency: Instead of attaching event handlers to each individual element, you attach a single handler to a parent element. It helps you reduce memory usage and improves performance, especially for large sets of elements.

2. Dynamic Elements: It allows handling events for elements that are added to the DOM dynamically after the page has loaded.

How to Use Event Delegation in jQuery

// Example: Assuming list items inside a <ul> with id="myList"
$('#myList').on('click', 'li', function() {
    // Your event handling code here
    console.log('Clicked on list item:', $(this).text());
});

In this example:

$('#myList') selects the parent <ul> element with the id myList.

.on('click', 'li', function() {...}) attaches a click event handler to all <li> elements that are descendants of #myList.

Using event delegation in jQuery is useful for handling events on dynamic elements and improving performance by reducing the number of event handlers.