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>