JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="title-items">
  <h3>
   items
  </h3>
</div>
<button onclick="addE('unset')">
  Add element w/o class
</button>
<button onclick="addE('unset')">
  Add element w class
</button>

<div id="messages">
  <h4>
    Messages
  </h4>
</div>

JavaScript

var el_items = $('#title-items');
var el_msgs = $('#messages');
var el_other = $('all p.unset');

$(function() {	
  $(el_items).on('click', el_other, function(e) {  		
  		// Fire: even if selector didn't "catch" anything
      // therefor, all elements under `el_items` will reach here ( even <h3> )
      addM('Hit 1st bind');     
  });  
  
  $(el_items).on('click', 'all a.unset', function(e) {
  		// Won't fire: The bind event won't find this class and quit.
      addM('Hit 2nd bind');      
  });  
  $(el_items).on('click', '.all a.unset', function(e) {
  		// Fire: only on ``.all a.unset` elements
      addM('Hit 3nd bind');      
  });  
})

function addE(cls='') {
	$(el_items).append(`<p class='all'><a class="${cls}">test (class:${cls})</a></p>`);
}

function addM(msg) {
	$(el_msgs).append(`<p>${msg}</p>`);
}