0
votes

Ne peut pas cibler la classe après addclass

J'ai une icône que lorsque cliquez sur Ajoute une classe à la classe NAV-BTN forte> et le menu anime à la hauteur totale de l'écran.

$('.nav-btn.open').click(function(){
        console.log('test');
        $('nav').animate({height: '60px'});
    });

jquery html

1 commentaires

Dupliqué possible de contraignation des événements sur des éléments créés de manière dynamique?

3 Réponses :

2
votes

C'est parce que vous liez l'événement de clic sur le .nav-btn.open code> au moment de l'exécution strong>, qui n'existe pas encore (la classe n'est ajoutée que lorsque le L'utilisateur clique sur le bouton). Au lieu de lier deux événements distincts, vous pouvez combiner la logique dans votre premier gestionnaire de clic et simplement ajouter une vérification conditionnelle si la classe Ouvrir code> est présent sur le bouton:

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="nav-btn">Nav Button</button>
<nav>Navigation</nav>

3 commentaires

Merci Terry, cela fonctionne presque parfaitement, mais le premier exemple du clic, rien ne se produit. Cela fonctionne parfaitement après le premier clic mais pas la première fois qu'il est cliqué. Des pensées?

Attendez ça marche maintenant. Je viens de changer l'ordre des animations. Merci encore, vous avez été une aide massive.

@paulblackmore mon mauvais, j'ai accidentellement échangé les valeurs. Consultez la démo mise à jour, cela devrait fonctionner maintenant :)

0
votes

@ La réponse Terry est aussi bien aussi bien, mais quelque chose d'autre que vous pouvez garder à l'esprit est un concept appelé Délégation d'événement . Comme l'expliquait Terry, le problème que vous ressentez est dû au fait que vous attachez un gestionnaire d'événements à un élément qui n'existe pas encore.

Toutefois, avec la délégation d'événements, vous pouvez attacher l'événement à un élément parent que vous connaissez sera toujours là (soit le document, soit juste un élément de conteneur). En utilisant $. Sur (...) code>, vous attachez le gestionnaire à l'élément parent et l'événement bulles descendez strong> à l'élément spécifié, que ce soit, que ce soit sur le point de savoir s'il existe si elle existe dans le Dom encore ou non. P>

ci-dessous, j'ai modifié votre échantillon pour montrer comment fonctionne la délégation d'événements. (Je pense que la réponse de Terry est plus propre, mais la délégation est un sujet utile de comprendre). P>

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="btn-parent">
  <button class="nav-btn close">Nav Button</button>
</div>

<nav>Navigation</nav>

0 commentaires

0
votes

comme solution alternative - si l'objectif n'est que l'animation ouverte / proche, le même résultat peut être obtenu avec une transition CSS. De cette façon, vous n'aurez à vous soucier que de basculer le .Open code> classe allumé et éteinte.

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-btn" href="#">Navigation</a>
<nav></nav>

0 commentaires