Bonjour,

Je viens vous demander de l'aide quant à un problème que je rencontre concernant un code Jquery. En effet, j'utilise plusieurs fonctions pour ajouter et effacer des classes CSS, et certaines fonctions se relancent sans que je le veuille. J'ai cherché très longuement un moyen d'empêcher cela, sans succès.

Voici le codes :

<script>
        $(function(){
            $('.accueil-button').on('click',function(){
                $("#apparition").html( $(this).find("nav").html() );
                
                $('.exemple').click(function(){
                    console.log('exemple');
                    $('.avant-dernier').addClass('expansion');
                    $('.dernier').addClass('disparition');
                    $('.avant-dernier').removeClass('exemple');
                    $(".expansion").html( $(this).find("nav").html() );
                

                       $('i').click(function(){
                        console.log('i');
                       $('.avant-dernier').removeClass('expansion');
                       $('.dernier').removeClass('disparition');
                    });
                });
            });
        });
    </script>

Quelques précisions :

 Il faut savoir que "i" est contenu dans ".exemple" donc je pense que mon problème vient du fait que je clique sur les 2 à la fois, mais ce n'est pas sûr.

Ma question est la suivante :

Pourquoi est-ce que j'obtiens ce résultat dans la console avec ce code ?

A chaque clic i est renvoyé avec une occurrence de plus et exemple est renvoyé. Je ne comprends pas d'où vient cette récursivité.

Pour ceux qui préfèrent voir ce à quoi cela ressemble en HTML CSS, voilà : (avec i = l'icône de croix et .exemple = les sections de ma grille)

-
Edité par Myrial 19 avril 2019 à 15:50:35