tl; dr: ¿Cómo puedo hacer que un elemento DOM, que se hace visible mediante un manejador de clics, sea el último elemento antes del cierre de body incluso si se están agregando elementos generados dinámicamente?jQuery: hacer un elemento último en el DOM (antes de cerrar el cuerpo) incluso después de elementos generados dinámicamente
Esencialmente quiero hacer que el clic que abre el elemento también lo mueva en el DOM para que sea el último antes del cierre del cuerpo, incluso después de que se hayan anexado algunos elementos dinámicos.
Mi problema surge de un modal que se abre dentro de otro modal, mientras que hay múltiples modales en una página. Una pega es que los submodales existen en el DOM en la carga de la página mientras que los modales primarios se están instanciando onclick (los submodales usan código diferente para generar mientras que los primarios usan el diálogo de la interfaz de usuario de jQuery).
Si abre un modal y luego abre el submodal todo está bien. Si abre un segundo modal y lo cierra cuando vuelva a abrir ese primer modal, el submodal no aparecerá ya que está oculto debajo del segundo modal. Si agrego estos submodales al cuerpo, poniéndolos después de cualquier modals generado, parecen estar bien (pero eso crea otros problemas). A pesar de que parece que esto no parece ser un problema de índice z (he intentado todo lo relacionado con eso sin suerte), parece estar relacionado con el lugar donde estos modales están posicionados en el DOM.
código podría ser más claro:
Esto es lo que el html se ve como en la página de carga:
<div id='submodal_1' class='submodal'>foo</div>
<div id='submodal_2' class='submodal'>bar</div>
</body>
Después de hacer clic para abrir la primera ventana modal primaria:
<div id='submodal_1'>subfoo</div>
<div id='submodal_2'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
</body>
Después hace clic para abrir ese submodal de modal, tengo que mover el submodal para que esté debajo de la modalidad primaria; de lo contrario, no aparecerá (y de nuevo, z-index no afecta este bloqueo):
$('#submodal_1').insertAfter('#primary_modal_1');
En este punto, si cierras ese #primary_modal_1, estará oculto, pero seguirá en el DOM. Si abre un segundo código quedará así:
<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:none'>foo</div>
<div id='submodal_1' class='submodal'>subfoo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:block'>bar</div>
</body>
En este punto, si se vuelve a abrir el primer modal primaria y tratar de abrir su submodal no aparecerá la submodal. Sin embargo, si mueve el submodal a estar por debajo de ese último modal primaria, así:
<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:none'>bar</div>
<div id='submodal_1' class='submodal'>subfoo</div> //<-- moved this line
</body>
El submodal apear correctamente. Quiero asegurarme de que los submodales siempre sean los últimos en el DOM, independientemente de la cantidad de modales primarios que se anexen.
Esto funciona bien para los elementos que ya están en el DOM pero no para los que se agregan dinámicamente. Los modales dinámicamente agregados serán los últimos en el DOM cuando se creen. – Stuart
Estoy trabajando en un JSFiddle ... – FMaz008
Hecho, puede consultar JSfiddle para un POC :) – FMaz008