Changer la classe

Signaler
-
 Dz -
Bonjour,

Je cherche à changer le nom de ma classe lorsque j'appuie sur le bouton nommé "Parcourir". j'utilise la classe "upload up" lorsqu'elle a été cliqué pour faire le changement de la classe "uploadDoc" contenant l'id "change". Mais quand je réalise les étapes je ne parviens pas à faire n'importe quelles actions sur ma classe "uploadDoc". Voici le code :

$(".btn-new").on('click',function(){
       $("#uploader2").append('<div class="row uploadDoc" id="change"><div class="col-sm-4 order-1 order-sm-0"><div class="docErr">Veillez upload au format pdf, jpg, jpeg, png</div><!--error--><div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" name="file[]" class="upload up" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" onclick="changeClass();" required/><div class="invalid-feedback">Document obligatoire</div></div></div><div class="col-sm-1 order-2 order-sm-1"><div class="pos_croix"><a href="#" class="test2"><i class="fas fa-times fa-xs" style="color:red;"></i></a></div></div><div class="col-sm-6 order-0 order-sm-2"><input type="text" class="form-control" name="test[]" placeholder="Veuillez preciser le document que vous ajoutez" required pattern="^[A-Za-z -]+$"><div class="invalid-feedback">Veuillez saisir le document que vous souhaitez ajouter.</div></div></div>');
   });
    
    $(".upload up").on('click', function changeClass(){
          document.getElementById('change').classList.toggle('uploadDoc');
    });

  $(document).on("click", "a.test2", function (){
         
        $(this).closest(".uploadDoc").remove();
  });


J'espère que quelqu'un pourra m'aider...

3 réponses

Messages postés
32276
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 mai 2021
3 448
Bonjour,

Le souci c'est que tu ajoutes du HTML dynamiquement
Et donc, les EVENT qui sont liés à des id ou des class de ces nouveaux éléments n'y sont pas attachés...
Pour ça, il faut les attacher après avoir créé le nouveau contenu.
Un truc du genre:
$(".btn-new").on('click',function(){
       $("#uploader2").append('<div class="row uploadDoc" id="change"><div class="col-sm-4 order-1 order-sm-0"><div class="docErr">Veillez upload au format pdf, jpg, jpeg, png</div><!--error--><div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" name="file[]" class="upload up" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" onclick="changeClass();" required/><div class="invalid-feedback">Document obligatoire</div></div></div><div class="col-sm-1 order-2 order-sm-1"><div class="pos_croix"><a href="#" class="test2"><i class="fas fa-times fa-xs" style="color:red;"></i></a></div></div><div class="col-sm-6 order-0 order-sm-2"><input type="text" class="form-control" name="test[]" placeholder="Veuillez preciser le document que vous ajoutez" required pattern="^[A-Za-z -]+$"><div class="invalid-feedback">Veuillez saisir le document que vous souhaitez ajouter.</div></div></div>');

    
    $(".upload up").on('click', function changeClass(){
          $('#change').toggleClass('uploadDoc');
    });

  $(document).on("click", "a.test2", function (){        
        $(this).closest(".uploadDoc").remove();
  });

 });

Merci beaucoup Jordane45, votre réponse m'a été très utile je comprends enfin pourquoi mon code ne fonctionnait pas. J'ai également un 2ème soucis sinon ça serait trop beau...
Je souhaiterai effacer le contenu lorsqu'on appuie sur la classe "test2" et remettre la classe "uploadDoc". J'arrive a remettre la classe mais en revanche pour ce qui est de supprimer le contenu et non toute la ligne je n'y parvient pas.

Voici le code qui me permet de supprimer normalement le contenu :
$(document).on("click", "a.test2", function (){
        $(".upl").eq(9).remove();
        $(".icon2").eq(9).remove();
        $(".fileUpload").eq(9).append('<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" class="upload up" name="upload1" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" />');
        document.getElementById('change').classList.toggle('uploadDoc');
    });


J'ai en tout 8 lignes qui sont affichées côté html et la ligne que je rajoute côté js est celle-ci, la 9ème. Je ne sais pas si c'est un soucis au niveau du chiffre avec "eq(9)" car le fait de remettre la classe "uploadDoc" fonctionne.
Messages postés
32276
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 mai 2021
3 448
Bonjour
Nouvelle question = ouverture d'une nouvelle discussion propre à se souci dans le forum.
Pense à mettre celle-ci en résolue.
>
Messages postés
32276
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 mai 2021

D'accord, je ne pensais pas que ça faisait partie d'une nouvelle question. Je m'en excuse.
Au final je reviens ici car je me suis aperçu que lorsque j'appelle la fonction "changeClass" elle ne fonctionne finalement pas. La classe ne se modifie pas. La seule manière pour que ça fonctionne c'est la suivante :
$(document).on("click", "a.test2", function (){
        const parent = $(this).closest('.row');
        const parent2 = $(this).closest('.fileUpload');
        parent.find('.upl').remove();
        parent.find('.icon2').attr('src', 'https://image.flaticon.com/icons/svg/136/136549.svg');
document.getElementById('change').classList.toggle('uploadDoc');
    });


Le problème c'est que ce n'est pas ce que je souhaite faire. Ce que j'ai actuellement c'est lors de l'appuie du bouton effacer il change la classe puis je dois de nouveau appuyer sur effacer pour que l'action se réalise.

Ce que je veux obtenir c'est lors de l'appuie sur Parcourir (input file en gros) que le changement de classe se fasse et lorsque je supprime avec le bouton "test2" que la classe se remette.

Avec le code suivant, la fonction "changeClass" ne fonctionne pas

 $(".btn-new").on('click', function (){
        $("#uploader2").append('<div class="row uploadDoc" id="change"><div class="col-sm-4 order-1 order-sm-0"><div class="docErr">Veillez upload au format pdf, jpg, jpeg, png</div><!--error--><div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" name="file[]" class="upload up" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" onclick="changeClass();" required/><div class="invalid-feedback">Document obligatoire</div></div></div><div class="col-sm-1 order-2 order-sm-1"><div class="pos_croix"><a href="#" class="test2"><i class="fas fa-times fa-xs" style="color:red;"></i></a></div></div><div class="col-sm-6 order-0 order-sm-2"><input type="text" class="form-control" name="test[]" placeholder="Veuillez preciser le document que vous ajoutez" required pattern="^[A-Za-z -]+$"><div class="invalid-feedback">Veuillez saisir le document que vous souhaitez ajouter.</div></div></div>');

        $(".upload up").on('click', function changeClass(){
            $('#change').toggleClass('uploadDoc');
        });

        $(document).on("click", "a.test2", function (){
            $(this).closest(".uploadDoc").remove();
        });

    });


Je suis désolé d'être allé trop vite tout à l'heure...