2

Jquery permite delegar eventos a elementos futuros en el DOM y pasar varios eventos como un objeto, el asunto es que no sé cómo unir esas 2 cosas en el código, suponía que era algo así:

$(document).on(".horas_practicas",{
mouseenter: function (){
    $(this).parent().css('background-color','#edeef5'); 
},
mouseleave: function (){
    $(this).parent().css('background-color','white');
}
});

.horas_practicas es una celda de una tabla, lo que quiero hacer es que cuando se ponga el puntero sobre esa celda resalte el que contiene esa celda.

Pero no funciona, aunque no me da error de sintaxis ni nada, ¿cuál es la forma correcta de delegar esos eventos a ese elemento?

2
  • ¿Lo quieres tener en una única operación? ¿Cuál es el problema con tenerlo en dos sentencias diferentes?
    – Alvaro Montoro
    el 23 may. 2019 a las 14:50
  • Pues quiero saber si se puede hacer de esa forma, no habria problema que fuese en dos sentencias pero prefiero saber las distintas formas de hacer una cosa, ya que Jquery permite delegar eventos y pasar multiples eventos en un objeto pero en la documentacion no se aclara si estas 2 caracteristicas pueden unirse que es lo que quiero hacer.
    – TheGrman
    el 23 may. 2019 a las 16:03

2 respuestas 2

2

Con .on():

    $(document).on('mouseenter mouseleave', '.horas_practicas', function(e) {
            // e.type is the type of event fired
            switch (e.type) {
                  case "mouseenter": {
                         break;
                  }
                  case "mouseleave" : {
                        break;
                  }
            }
        });

En esta otra pregunta se explica el uso de delegar eventos con .on(): No me calcula la hora al ser elementos dinámicos

Snippet ejemplo:

$(document).ready(function(){
  $(document).on("mouseenter mouseleave", ".horas_practicas", function(e){
  console.log(e.type);
      switch (e.type) {
          case "mouseenter": {
             $(this).parent().css("background-color","red");
             break;
          }
          case "mouseleave" : {
             $(this).parent().css("background-color","blue");
             break;
          }
      }
  });


    
  setTimeout(function(){ $("body").html("<div class='horas_practicas'>Div horas_practicas</div>") }, 3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Puedes ver la pregunta original contestada en ingles en StackOverflow.com

3
  • Pero de esa manera los elementos agregados dinamicamente tendran el evento? ese ".horas_practicas" es una celda de una tabla cargada por javascript y la unica forma de que esta accione el evento es delegandolo.
    – TheGrman
    el 23 may. 2019 a las 14:34
  • He editado la respuesta, puedes hacerlo igualmente comprobando el .type del event.
    – x3k
    el 23 may. 2019 a las 15:11
  • Esto cumple con el objetivo, mil gracias! aunque me gustaria saber igual si Jquery puede hacer eso por si solo, o sea delegar multiples eventos en un selector, se puede hacer las 2 por separado deberia poderse usarlas juntas.
    – TheGrman
    el 23 may. 2019 a las 16:11
0

Puede que te refieras a la función de jQuery hover que hace precisamente lo que quieres hacer y que tiene dos parámetros, el primero una función para la entrada del ratón y el segundo otra función para cuando el ratón sale.

Te pongo un ejemplo:

$(".horas_practicas").hover(function (){
  $(this).parent().css('background-color','#edeef5'); 
},function (){
  $(this).parent().css('background-color','white'); 
});

Y con CSS:

function addElem(){
  var newElem = "<div class='horas_practicas'>elem</div>";
  document.getElementById("container").innerHTML += newElem;
}
.horas_practicas:hover{
  background-color: #edeef5;
}

.horas_practicas{
  background-color: white;
}
<div id="container">
  <div class="horas_practicas">elem</div>
  <div class="horas_practicas">elem</div>
  <div class="horas_practicas">elem</div>
</div>  
<button type="button" onclick="addElem()">añadir elem</button>

3
  • Lo probe, pero funciona a medias, en elementos ya cargados en la pagina funciona pero los que se agregan despues no tienen el evento.
    – TheGrman
    el 23 may. 2019 a las 14:29
  • y por qué no usas css, es mucho más eficiente, te actualizo la respuesta
    – David
    el 23 may. 2019 a las 15:42
  • Porque fijate que lo que quiero resaltar es el elemento contenedor de ".horas_practicas" no al elemento en si, css fue lo primero que intente, supuestamente con la pseudoclase :has() esto se hace pero no me funciono.
    – TheGrman
    el 23 may. 2019 a las 16:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.