Problème d'événement click en jquery

Fermé
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 - 31 mars 2018 à 10:35
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 - 1 avril 2018 à 23:46
Bonjour,

J'ai une page avec des cases à cocher et un champ de recherche. En fonction de ce qu'on en fait il y a du contenu qui s'affiche à droite.



Par exemple ceci:



Et si on clique dessus, une modale s'ouvre:



Sur la page de recherche j'ai une div comme ça:



Et j'y met le contenu comme ça:
$.ajax({ 
type: "POST", 
url: "views/listehenchs.php", 	   
data: { partiedunomduhench: nomhench },
success: function(msg) { 
alert (msg);
document.getElementById('henchs').innerHTML = msg;
}
});


Le rectangle qui correspond au résultat de la recherche (le rectangle avec le genre de rhinocéros debout) est bien affiché si je met son code manuellement dans la div sur la page principale, ou si je l'y met via AJAX. SAUF que l'événement jquery qui provoque l'ouverture de la modale quand on clique sur ce rectangle ne s’exécute QUE si le rectangle avec le rhinocéros debout s'affiche via l'insertion manuelle de son code sur la page principale. Si ce rectangle avec le rhinocéros debout est affiché car il a été ajouté dans la div via AJAX, l'événement ne s'exécute pas.

Visiblement c'est lié à l'événement click:



La modale s'ouvre à nouveau:



Mais il y a plusieurs problèmes:
1) L'opacity (on voit le bout de code sur l'image) de tout ce qui se trouve autour de la modale n'est pas à 1 lorsqu'elle s'ouvre
2) Le clique sur la croix en haut à droite de la modale ne provoque pas sa fermeture, alors que si je le fais sans afficher la rectangle avec le rhinocéros via une requête AJAX, ça provoque la fermeture de la modale
3) Si je clique ailleurs que sur la modale, par exemple dans le menu, la modale ne se ferme pas, alors que si je le fais sans afficher la rectangle avec le rhinocéros via une requête AJAX, ça provoque la fermeture de la modale

J'ai même remarqué que maintenant que j'utilise le "on", l'événement ne fonctionne plus à d'autres endroits où je n'utilise pas de chargement de contenu via AJAX ...

A mon avis il y a trop de "communications" entre le contenu présent au départ, et celui ajouté via AJAX ...

Avez vous une solution ?

1 réponse

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
31 mars 2018 à 11:31
Bonjour,

Déjà, pour tes prochains messages..merci de poster ton code directement sur le site au lieu d'en mettre des images (voir ici comment utiliser les balises de code : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code )

Ensuite, as tu regardé dans la console si il n'y avait pas des erreurs ?

Et dans les contenus que tu charges en ajax... n'y aurait-il pas du javascript dedans ?




0
cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 145
1 avril 2018 à 23:46
Bonsoir,

Oui il y a du javascript dedans. Avec le "on" en jquery j'arrive à faire ouvrir la modale, mais ensuite il y a des soucis quand le contenu chargé via ajax doit interagir avec le contenu présent au départ, et inversement.

C'est vraiment casse tête ...

Dans le pire des cas je n'utilise pas d'ajax, mais un bouton pour lancer la recherche, à la manière de google ou tout simplement le moteur de recherche interne à commentcamarche.net qui n'actualisent pas les résultats en temps réel en fonction de ce qu'on écrit.

Mais voir en direct ce qui correspond aux cachés cochées / décochées aurait été très pratique ...

Oups désolé, la prochaine fois j'y penserais d'accord.
0