Encontré en ésta misma web, una solución para detectar el click en un div hijo, usando jQuery. Si colocas el script debajo del enlace:
<script src="/storage/sdcard0/programacion/lib/frameworks/js/jquery-3.6.0.min.js">
</script>
funciona perfectamente, pero si el enlace está abajo no me funciona. Bien, eso no es problema, pero quiero saber hacerlo sin jQuery; sin recibir los id de los div padres y si es posible sin definir clase >class . El código es el siguiente:
jQuery:
$(function () {
$(document).on('click', '.box', function () {
alert($(this).attr('id'));
});
});
CDNJS y demás:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-content" id="Categoria">
<div class="box" id="Music"><i class="icono fas fa-music"></i><p>Audio & Video</p></div>
<div class="box b" id="Sport"><i class="icono fas fa-futbol"></i><p>Deportes</p></div>
<div class="box c"id="Home"><i class="icono fas fa-home"></i><p>Hogar</p></div>
<div class="box d" id="Games"><i class="icono fas fa-gamepad"></i><p>Videojuegos</p></div>
<div class="box e" id="Tecno"><i class="icono fas fa-laptop"></i><p>Tecnologia</p></div>
<div class="box f" id="Licor"><i class="icono fas fa-beer"></i><p>Licores</p></div>
<div class="box g" id="Tools"><i class="icono fas fa-toolbox"></i><p>Herramientas</p></div>
<div class="box h" id="Instrumentos"><i class="icono fas fa-guitar"></i><p>Instrumentos</p></div>
<div class="box i" id="Recaudo"><i class="icono fas fa-bus-alt"></i><p>Recaudo Monterrey</p></div>
</div>
Y lo siguiente es mi verdadero código, al que yo le quiero agregar la función:
<div id="PadreDepadres" align="center" style="display:block">
<!-- ============================ -->
<!-- Inicio de contenedor A -->
<!-- ∞∞——∞∞——∞—∞——∞∞——∞∞ -->
<div id="PadreA" align="" style="width:300px;
margin:8px; border-radius:6px; padding:8px;
background-color:cyan; color:black;">
<small>Opción 1.1</small><br>
<span style="color:red"><b> Otro texto aquí</b></span>
<hr />
<!-- ———————————————— -->
<!-- Botón: Entrar -->
<!-- ∞∞——∞∞——∞—∞——∞∞——∞∞ -->
<div id="hijoA" style="width:100px; border:2px solid;
border-color:gold; border-radius:10px;
padding:2px; background-color:#555fff;
font-weight:bold; color:white;">Entrar</div>
</div>
<!-- Final del contenedor -->
<!-- ============================ -->
<!-- ============================ -->
<!-- Inicio de contenedor B -->
<!-- ∞∞——∞∞——∞—∞——∞∞——∞∞ -->
<div id="PadreB" align="" style="width:300px;
margin:8px; border-radius:6px; padding:8px;
background-color:cyan; color:black;">
<small>Opción 2.1</small><br>
<span style="color:red"><b> Otro texto aquí</b></span>
<hr />
<!-- ———————————————— -->
<!-- Botón: Entrar -->
<!-- ∞∞——∞∞——∞—∞——∞∞——∞∞ -->
<div id="hijoB" style="width:100px; border:2px solid;
border-color:gold; border-radius:10px;
padding:2px; background-color:#555fff;
font-weight:bold; color:white;">Entrar</div>
</div>
<!-- Final del contenedor -->
<!-- ============================ -->
</div>