<div class="subjects"> <div class="bg-red"> <i class="lni lni-rocket"></i> <h6 class="font-weight-bold">Physics</h6> </div> </div>

Digamos que tengo el html anterior y me gustaría obtener el contenido de texto de h6 cada vez que hago clic en el div más externo. Esto es lo que hice:

 $('.subjects').on('click', (e) => { const h6 = $(this).find('h6'); console.log(h6.text()); });

Pero esto no imprime Physics , que estaba dentro de h6 . Imprime una cadena vacía. ¿Cómo accedo al texto de h6 cuando hago clic en el div más externo?