Problème de manip du DOM/CSS avec AJAX.

Bonjour,

j'ai un problème de manip du DOM avec AJAX.

Lorsque mon formulaire est validé, j'ai un second formulaire qui s'affiche grâce à AJAX et je souhaite manipuler les CSS de ses éléments enfants grâce à un trigger. Mais je n'y arrive pas

Voici mon code :

$(document).ready(function(){
    //écouteur d'événement 'form_completed_reload' associé au succés de ma requête AJAX
    $(this).on( "form_completed_reload", function() {  
        console.log('ajax successfull !!!');
        $("#form2-result-Tarot").addClass("anim-result-tarot");
        console.log('ajout de la nouvelle classe !');
    });
    
});

Mes console.log fonctionnent correctement mais pas le addClass(); et je ne saisis pas pourquoi.

Auriez-vous des pistes de réflexion à me proposer ? j'ai lu sur le forum la notion de "délégation d'évènements", mais c'est ce que je suis déjà en train de faire avec ".on()".

Merci d'avance.

une réponse 19 jours plus tard .... mais bon ...plusieurs façons de debuger ça

Enfin à lire votre portfolio , puisque vous êtes intégrateur( bon niveau, longue expérience) , .... la réponse ne doit pas être évidente ....( je me lance)

1 aller dans votre console et si jquery est chargé et si vous taper $("#form2-result-Tarot") ; que retourne cet appel ?

2 regardez votre code source , trouvez vous ce code ci dessous?
<tag id="form2-result-Tarot" > ( tag = div footer ....)

3 comment est injecter le code contenant form2-result-Tarot dans le code ?
innerHTML method is not a standard DOM method. It does not really insert the elements into the DOM tree, thus later they can not be found using DOM reference.

You should use DOM methods instead of innerHTML. Dom methods are: createElement(), createTextNode(), setAttribute(), appendChild()... and so on
Modifié par 75lionel (30 Jul 2016 - 12:11)