FORZAR EVENTOS EN ETIQUETAS VACÍAS
Es simple, si la div debe aparecer vacía hay que poner un espacio en blanco pero codificado en html char
o sea
<html>
<head>
<title>FORZAR EVENTOS</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK href="../css/estilos.css" type=text/css rel=StyleSheet>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
$(".clicar1").click(function(){
$(".limpiar").html(" ");
$("#clicar01").html("CLICASTE EN HOLA");
});
$(".clicar2").click(function(){
$(".limpiar").html(" ");
$("#clicar02").html("CLICASTE EN VACÍO");
});
$(".clicar3").click(function(){
$(".limpiar").html(" ");
$("#clicar03").html("CLICASTE EN ");
});
});
</script>
<style>
.titulo{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
text-align: center;
padding-left: 0px;
}
.contenido{
text-align: left;
padding-left: 20px;
padding-right: 20px;
}
.limpiar{
color:crimson;
font-weight: bold;
}
table{
border-collapse:collapse;
margin-top: 50px;
color:#000000;
}
td{
border: #000 solid 1px;
width: 220px;
}
</style>
</head>
<body class="cuerpo">
<div class="cenefa" style="border:none;"> <!-- inicio cenefa -->
<div style="float:left; margin-left:40px;">
<img src="../imagenes/logo_cenefa.png" width="139" height="75" alt="Iqsystems-home" >
</div>
</div> <!-- fin cenefa -->
<div class="cierre"></div>
<div class="titulo">
FORZAR EVENTOS EN ETIQUETAS VACÍAS
</div>
<div class="contenido">
<table>
<tr>
<td>DIV PARA CLICAR</td>
<td>CONTENIDO</td>
<td>ACCIÓN AL CLICAR LA DIV</td>
</tr>
<tr>
<td><div class="clicar1">Hola</div></td>
<td><div>Esta div tiene texto</div></td>
<td><div class="limpiar" id="clicar01"></div></td>
</tr>
<tr>
<td><div class="clicar2"></div></td>
<td><div>Esta div está vacía</div></td>
<td><div class="limpiar" id="clicar02"></div></td>
</tr>
<tr>
<!--<td><div class="clicar3"><img class="relleno" src="1x1.png"/></div></td>-->
<td><div class="clicar3"> </td>
<td><div>Esta div tiene un - transparent</div></td>
<td><div class="limpiar" id="clicar03"></div></td>
</tr>
</table>
</div>
</body>
</html>