7
votes

JQuery - Faites durer un élément dans le DOM (avant la fermeture du corps) même après des éléments générés dynamiquement

TL; DR: STRAR> Comment puis-je obtenir un élément DOM, qui est visible visible par un gestionnaire de clic, pour être le dernier élément avant la fermeture du corps code> même si de dynamisme Des éléments générés sont en train d'être annexé?

essentiellement, je veux avoir le clic qui ouvre l'élément le déplace également dans le DOM pour durer avant que le corps se ferme même après que certains éléments dynamiques ont été ajoutés. P>


Mon problème provient d'un Modal qui est ouvert dans un autre modal alors qu'il existe plusieurs modaux sur une page. Une capture est que les sous-dumes existent dans la charge DOM à la page tandis que les modaux principaux sont instanciés OnClick (les sous-dumans utilisent un code différent pour générer tandis que les principales utilisent la boîte de dialogue JQuery UI). P>

Si vous ouvrez un modal et puis ouvrir le sous-modé tout va bien. Si vous ouvrez un deuxième modal, fermez-le lorsque vous rouvrez que le premier modal, le sous-revide n'apparaîtra pas car il est caché sous le deuxième modal. Si j'appuie ces sous-duminaires dans le corps, mettez-les donc après les modaux générés, ils apparaissent bien (mais cela crée d'autres problèmes). En dépit de ce qu'il semble que cela ne semble pas être un problème de z-index (j'ai tout essayé de tout ce qui concerne cela sans chance), il semble être lié à l'endroit où ces modaux sont positionnés dans le DOM. P >

Code peut être plus clair: p>

C'est ce que le HTML ressemble à la charge de la page: P> xxx pré>

après avoir cliqué pour ouvrir le premier primaire Fenêtre modale: P>

<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>


0 commentaires

3 Réponses :


8
votes

la méthode d'append de jQuery "Insérez le contenu, spécifié par le paramètre, à la fin de chaque élément dans l'ensemble d'éléments appariés."

$('body').append(...);


3 commentaires

Cela fonctionne bien pour les éléments déjà dans le DOM mais pas pour ceux qui ont été ajoutés de manière dynamique. Les modules ajoutés dynamiquement seront durer dans le DOM lors de leur création.


Fait, vous pouvez vérifier le jsfiddle pour un POC :)


Cela ressemble à la réponse. Je dis "on dirait" comme pendant que cela fonctionne et que votre réponse est correcte, je trouve d'autres problèmes qui interfèrent ... Soupir. Merci pour l'assistance, cependant!



1
votes

Vous pouvez toujours clone l'élément, Ajoutez Le clone à la fin de la balise , puis Supprimer l'élément d'origine.

Rob w a souligné que le clonage est inutile, en raison de l'appel de l'élément existant le supprimant automatiquement de la précédente. position. Avec cela à l'esprit, vous pouvez étendre votre code pour ouvrir une nouvelle fenêtre modale pour faire quelque chose comme ceci: xxx

qui devrait (supposer que j'ai bien compris l'API correctement) Tous les éléments sous-modes (identifiés par la classe sous-modique ) à la fin de la balise TAG.


2 commentaires

Le clonage n'est pas nécessaire. Lorsque vous appendez un élément, il est retiré de la position précédente.


@ROBW Bon à savoir, merci. Je ne peux pas dire que j'ai déjà besoin d'ajouter un élément qui existait déjà avant que ce n'est pas quelque chose que j'ai vraiment examiné.



3
votes

Jetez un coup d'œil à la jQuery appendez méthode.


0 commentaires