2

Me veo con la problemática de querer tener definido un comportamiento de un objeto de configuración y que se aplique a todos los elementos de la clase seleccionada, incluso en aquellos que se generen posteriormente en el DOM.

Para los eventos existe una manera práctica para hacerlo a través de colgar el evento al document y pasarle como segundo parámetro de la función on() el elemento que queremos que dispare la función. Pero no encuentro una manera similar de hacerlo y lo que estoy tratando de evitar es inicializarlo dentro de la función crear_cubo() de mi ejemplo.

¿Existiría una manera de hacerlo?

$(function () {
    $('.cubo').draggable({
    revert: true
  });
  
  $(document).on('click', '#crear-cubo', crear_cubo);
});

function crear_cubo () {
  let contenedor = $('#contenedor-cubos');
  let html = '<div class="cubo"></div>';
 
  contenedor.append(html);
}
#contenedor-cubos {
 display: flex;
 flex-wrap: wrap;
 padding: 10px 0;
}

.cubo {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 2px solid black;
  float: left;
  margin-right: 5px;
}

.inicial {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>

<div id="contenedor-cubos">
  <div class="cubo inicial"></div>
</div>

<button type="button" id="crear-cubo">Crear cubo</button>

3
  • Hola, no quiero que pienses que es una critica, pero, por que usar jquery para esto? ahora en 2021 y tratando de emular una reactividad que se construye con palitos? Digo cada quien trabaja con las herramientas que prefiere pero por ejemplo con framworks mas avanzados, como Vue por ejemplo esta clase de problemas no existen ni te rompes la cabeza con esto. Si lo usas por el draggable de JQuery UI con vue tienes un monton de plugins como Vue.Draggable. el 3 mar. 2021 a las 15:51
  • Solo lo comento porque considero que seguir poniendo en producción tecnologías que no son sustentables hoy en dia es reteniente para uno como dev :/ el 3 mar. 2021 a las 15:51
  • 1
    ¡Para nada me lo tomo a mal! Son requerimientos del cliente, no está en mi mano el poder usar frameworks de alto nivel :(
    – phpMyGuel
    el 3 mar. 2021 a las 15:53

1 respuesta 1

2

Debes escuchar cambios en el documento o contenedor para detectar cuando se agreguen elementos y puedes usar la librería arrive.js.

Si solo van a aparecer en un contenedor específico, escucha los cambios ahí y no en el documento, para evitar que el navegador realice trabajos extra. De hecho, esto aplica también para los clics, no tiene caso delegarlos al documento si se trata de elementos únicos.

$(function () {
    $('.cubo').draggable({
    revert: true
  });
  // Escuchar cuando se agregue un nuevo elemento con la clase deseada
  $('#contenedor-cubos').arrive('.cubo', cubo => {
      $(cubo).draggable({
          revert: true
      });
  });
  // El botón tiene ID y es único, escuchar clics directamente
  $('#crear-cubo').on('click', crear_cubo);
});

function crear_cubo () {
  let contenedor = $('#contenedor-cubos');
  let html = '<div class="cubo"></div>';
 
  contenedor.append(html);
}
#contenedor-cubos {
 display: flex;
 flex-wrap: wrap;
 padding: 10px 0;
}

.cubo {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 2px solid black;
  float: left;
  margin-right: 5px;
}

.inicial {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script>

<div id="contenedor-cubos">
  <div class="cubo inicial"></div>
</div>

<button type="button" id="crear-cubo">Crear cubo</button>

2
  • ¡Muchas gracias por la respuesta! No conocía la librería y veo que por debajo usa MutationObserver, simplificando en gran medida su uso. Creo que me quedaré con esta. Estaba barajando la opción de usar el evento DOMNodeInserted pero está deprecado y la solución no me terminaba de convencer por ello.
    – phpMyGuel
    el 3 mar. 2021 a las 15:57
  • 1
    @phpMyGuel, efectivamente, MutationObserver remplaza los eventos de mutación obsoletos como DOMNodeInserted, entre algunos otros.
    – Triby
    el 3 mar. 2021 a las 16:02

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.