JSFiddle - React, Tailwind, and code Playground

HTML

<div id="items">
    <div class="item"><a href="#">One</a></div>
    <div class="item"><a href="#">Two</a></div>
    <div class="item"><a href="#">Three</a></div>
</div>

<div id="items2">
    <div class="item"><a href="#">One</a></div>
    <div class="item"><a href="#">Two</a></div>
    <div class="item"><a href="#">Three</a></div>
</div>

CSS

#items { margin-bottom: 20px; }
.item {
    border: 1px solid #ccc;
    padding: 5px;
}

JavaScript

$('#items').on('click', '.item a', function(e) {
    console.log("### Items click"); 
});

$('#items2 .item a').on('click', function(e) {
    console.log("### Items2 click");
});

var items = $('#items');
console.log(jQuery._data(items.get(0), 'events'));
$('.item a', items).each(function() {
    console.log(jQuery._data(this, 'events'));
});

console.log('----------------------');

var items2 = $('#items2');
console.log(jQuery._data(items2.get(0), 'events'));
$('.item a', items2).each(function() {
    console.log(jQuery._data(this, 'events'));
});