0

Estoy sacando registros de una tabla y salen todos los que hay. Cada uno se representa como una tarjeta. En ellos le he añadido un div que quiero que cambie de posición cuando paso por encima de el, pero al ser registros dinamicos no consigo hacerlo funcionar en todos.

Lo intento de la siguiente forma:

$( ".posicionPapelera" ).mouseenter(function() {
    $(this).find('.posicionPapelera').css("right","-37px");
    $(this).find('.posicionPapelera').css("transition","1s");
});
$( ".posicionPapelera" ).mouseleave(function() {
    $(this).find('.posicionPapelera').css("right","-71px")
    $(this).find('.posicionPapelera').css("transition","1s");
});

El CSS de #posicionPapelera:

.posicionPapelera {
    position: absolute;
    top: 11px;
    right: -71px;
    background: #40576b;
    border-radius: 3px;
    padding: 0px 31px 0px 4px;
}

La vista:

@foreach ($productos as $pro)
   //datos
   <div class="posicionPapelera" id="posicionPapelera">
      <a href=""><i class="far fa-edit eyeProduct"></i></a>
      <a href=""><i class="far fa-trash-alt eyeProduct"></i></a>
   </div>  
   //datos           
@endforeach

No llega a efectuar ninguna acción cuando paso por encima.

1 respuesta 1

2

Tal y como lo tienes el la asignación de tus eventos la estás haciendo sobre uno elemento que aun no existe en el DOM en el momento de realizarse la asignación (normalmente cuando el DOM carga).

Una manera cómoda de solventarlo es asignar el evento al document y mediante el parámetro opcional selector de la función on() pasarle el elemento que queremos que lo dispare.

selector Type: String A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

$(function () {
  $(document).on('click', '#boton', aniadir_cubo);
  $(document).on('mouseenter', '.cubo-azul', entra_en_cubo);
  $(document).on('mouseleave', '.cubo-azul', sale_del_cubo);
});

function aniadir_cubo () {
  let html = '<div class="cubo-azul"></div>';
  let contenedor_cubos = $('#contenedor-cubos');
  
  contenedor_cubos.append(html);
}

function entra_en_cubo () {
  console.log('ENTRA');
}

function sale_del_cubo () {
  console.log('SALE');
}
.cubo-azul {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  background-color: blue;
  margin: 10px;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="boton">Añadir cubo</button>

<div id="contenedor-cubos">

</div>

EDIT

Editado para ejemplificar con el código de la pregunta.

$(function() {
  $(document).on('mouseenter', '.posicionPapelera', function() {
    $(this).css("right","-37px");
    $(this).css("transition","1s");
  });
  
  $(document).on('mouseleave', '.posicionPapelera', function() {
      $(this).css("right","-71px")
      $(this).css("transition","1s");
  });
});
.posicionPapelera {
    position: absolute;
    top: 11px;
    right: -71px;
    background: #40576b;
    border-radius: 3px;
    padding: 0px 31px 0px 4px;
    
    /* Añadidos para poder hacer el ejemplo */
    width: 100px;
    height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div class="posicionPapelera" id="posicionPapelera">
    <a href=""><i class="far fa-edit eyeProduct"></i></a>
    <a href=""><i class="far fa-trash-alt eyeProduct"></i></a>
 </div>  

5
  • Hola gracias por tu respuesta @phpMyGuel . No se si puedes ayudarme con un ejemplo de mi código, no comprendo mucho JavaScript.
    – Miguel
    Commented el 2 sept. 2020 a las 15:22
  • Edité la pregunta para que veas como se haría con tu ejemplo.
    – phpMyGuel
    Commented el 2 sept. 2020 a las 18:28
  • Hola @phpMyGuel y si al entrar en posicionPapelera quiero que el efecto lo haga en otra clase?? se puede, me estoy volviendo loco.
    – Miguel
    Commented el 21 sept. 2020 a las 18:55
  • Se podría hacer, desde luego. Te recomiendo hacer una nueva pregunta, aportando este nuevo caso que comentas y estoy seguro de que alguien te ayudará ^^
    – phpMyGuel
    Commented el 21 sept. 2020 a las 19:02
  • gracias voy a hacerla! @phpMyGuel
    – Miguel
    Commented el 21 sept. 2020 a las 19:03

Tu Respuesta

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

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