Bonjour,

Petite incompréhension, j'ai un événement click qui ne s'éxécute qu'une seul fois et je vois pas pourquoi

$('.addPlus').click(function(){
    var id, input, btn, cpt;
    id = $(this).attr('data-nb');
    cpt = $('.addPlus').length + 1;
    console.log(cpt);
    input = '<input name="mail_'+cpt+'" type="email" class="form-control form-control-lg col-6 offset-3" data-nb="'+cpt+'" placeholder="E mail '+cpt+'">';
    btn = '<button type="button" class="addPlus btn btn-success" data-nb="'+cpt+'">+</button>';
    $(this).before(input+btn).toggle(); 
});

En dur dans l'html j'ai un champs mail 1 et un button 1 au clic ma fonction fonctionne j'ajoute bien un champs mail 2 + un button 2 et je supprime bien le button 1 mais lors du clic sur le button 2 pour ajouter un 3eme champs bah nada rien ne ce passe.

Merci de votre aide

Le problème que lorsque tu utilises $('.addPlus').click(...), c'est que l’événement ne se créer que pour les éléments qui existe au moment où cette ligne est exécuté. Mais vu que tu rajoute après un nouveau bouton, l’événement n'existe pas pour cet élément.

La solution est simple mais faut la connaitre. Essaye de faire ça : 

$('body').on('click', '.addPlus', function() { 
   ...  // Le code à exécuter lors de l'évènement
});

De cette manière, tous les éléments seront pris en compte, ajouté dynamiquement ou non.

-
Edité par duquesnoyalexy 10 octobre 2018 à 16:16:55

Merci ça fonctionne .