11521 sujets

JavaScript, DOM et API Web HTML5

 <script type='text/javascript' src='js2/jquery.js'></script>
 <script type='text/javascript'>
 $(document).ready(function(){
	$('a').on('click',function() {
		if($(this).attr('class') == 'test') {
						
				$('#T1').append("<a href=# class=test2>2eme test ne fonctionne pas</a>");
						
					}
					if($(this).attr('class') == 'test2') {
						alert('voila');
					}
		
		});
 
 });
 </script> 
 

 
  <a href=# class=test>premier lien ICIi</a>
  <br>
  <a href=# class=test2 >2eme test fonctionne</a>
|
 <div id=T1></div>


le premier lien ca marche et affiche un lien ayant une classe=test2
le 2eme lien aussi marche bien et affiche un message voila
le meme lien ajoutee dynamiquement dans le div par ajax n'affiche rien
Modifié par mahmoudi (23 Nov 2015 - 00:08)
JENCAL a écrit :
Il est où ton ajax là ?


j'ai citer juste un exemple dans mon site jaffiche des articles avec ajax pour chaque article y a des lien comm supprimer par exemple ou commenter etc ncessite de l'ajax aussi le probeleme c que les articles affichee sans ajax on peu les commenter etrc les autres non.
comm dans l'exemple que j'ai ecri

<a href=# class=test>premier lien ICIi</a>

ce lien est fonctionnel le 2eme aussi mais les liens affiche par recursivite ne font rien
Salut Mahmoudi,

Ton problème viens certainement de ton sélecteur qui n'est pas assez haut.

Je m'explique, ton gestionnaire d'évènement "click" est lié au sélecteur $('a'). Donc applicable à tous les balises "a" déjà présent lors du chargement de ton code javascript.

Ensuite, tu viens rajouter d'autre balises "a" dans la DOM, mais ces derniers ne sont pas présent dans ton premier sélecteur.

C'est pour cela que ça fonctionne avec le code existant, mais pas avec celui injecter plus tard.

Pour contourner cela, il suffit de faire un sélecteur sur un élément déjà existant, et qui restera toujours (ça peut être body, div particulière etc ....) et d'ensuite, venir cibler le lien sur l'évènement "click".

Tu aurais quelques chose comme ceci:

$('body').on('click','a', function() {
//blabla
});