11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je m'arrache les cheveux, je débute avec Javascript/Ajax/Jquery, je récupère des button dans un tableau grace à un appel Ajax Jquery.
Ensuite j'aimerai afficher un formulaire lorsque l'utilisateur clique sur un des button.
Mais je n'arrive pas à intercepter l'evennement clic sur ce bouton.
<div id="blocpage">
	<ul id="entete_rubrique">
		<li> Suivi du Compte<br />d'attente</li>
		<li><a href="cctatt.php" class="select" id="1">965840000599001009</a></li>
		<li><a href="cctatt.php" id="2"> 965091602061001009</a></li>
		<li><a href="cctatt.php id="3"> 116000001439082060</a></li>
		<li><a href="cctatt.php id="4">[116xxxxxxxxxxxx]</a></li>
	</ul>
	<div id="bloc_cct_att">

		  <div id="ficheform">
			<div id="ficheformContent">
				<h3>Identification du versement</h3>
				<a href="#" id="fermer">X</a>
				<div id="identification"><img src=ajax-loader.gif" />
	
				  </div>
			</div>
		</div>
	</div>
</div>

Lorsque je clique sur un li a je charge le contenu de <div id="bloc_cct_att"> avec un tableau comprenant de nombreuses lignes.
ci dessous le code qui charge mon tableau HTML
$("#entete_rubrique li a").on('click',function(e){
	e.preventDefault();
	var cct= $(this).attr("id");	
	$.ajax({
		url : './cctatt/cctatt_ajax.php',
		type : 'GET',
		data : 'cct='+cct,
		datatype:'html',
		success: function(code_html,statut){
			$('#bloc_cct_att').html(code_html);
		}		
         });		
});

Mon problème arrive ici dans le HMTL que je récupère, celui-ci contient un tableau avec au début de chaque ligne un <input type="button" class="fiche" />
Je veux récupérer l'evénnement sur clic que j'intercepte avec :
 $('.fiche').click(function() {
				alert("coucou");
                               // AFFICHER LE FORMULAIRE			
		});

mais cela ne foncionne pas, j'ai l'impression que je ne peux pas récupérer les données sur ce qui a été chargé via mon appel Ajax . Smiley bawling

Si je recharge tout ma page via php sans appel Ajax j'intercepte bien mon évennement.
Je pense que j'ai un problème de compréhension et qu'il me manque des fondamentaux pour comprendre.
Si une bonne âme pouvait me mettre sur la voie de la compréhension .
Modifié par Bdenigm (29 Jul 2014 - 10:45)
Je ne suis pas sur de bien comprendre dans quel ordre tu fais les choses, mais j'ai déjà rencontré ce genre de mésaventure.

un appel du type $('.fiche').click(...) va rattacher un évènement à tous les éléments de classe "fiche", mais seulement les éléments présents dans la page à ce moment là, les éléments HTML ajoutés après coup (comme dans ton cas) ne seront pas concernés par $('.fiche').click(...), il faut relancer cette commande après le chargement du nouveau code.
Oui c'est exactement ça j'accede aux éléments présents au chargement de la page mais à ceux qui arrivent apres via Ajax.
Tu me conseille de relancer le chargement mais le chargement de quoi ?
j'ai l'impression qu'il faut que j'ajoute mes élément autrement que par la méthode .html de Jquery.
J'ai essayé via un append mùais ça ne fonctionne pas mieux.
non il faut simplement que tu relances la fonction javascript $('.fiche').click(...) dans ta fonction de retour ajax, après la ligne
$('#bloc_cct_att').html(code_html);
tu m'a mis sur la piste je pense, en te répondant j'ai mis la main sur les mots clés qu'il me fallait dans mes recherches. à savoir : éléments apres AJAX.

et bingo je tombe là dessus :
http://chez-syl.fr/2012/02/les-evenements-sur-des-elements-charges-en-ajax/

je pensais l'avoir essayé il figure d'ailleurs sur mon code pour gérer le premier click, mais j'ai sans doute dû mal m'en servir pour le second.

je confirmerai demain

merci pour l'aide
Modifié par Bdenigm (28 Jul 2014 - 19:11)
Zebrou a écrit :
non il faut simplement que tu relances la fonction javascript $('.fiche').click(...) dans ta fonction de retour ajax, après la ligne
$('#bloc_cct_att').html(code_html);


je ne suis pas certain de bien comprendre mais j'essaierai demain.

merci
Bonjour,
en effet, lorsque tu insères du html dans ta page avec javascript, les événements que tu as déclarés avant n'ont pas d'effets sur les nouveaux nœuds.

Il y a (au moins) 2 solutions, celle que te propose Zebrou, c'est-à-dire re-déclarer l'événement click pour les nouveaux arrivants et seulement pour eux:

$('.fiche', '#bloc_cct_att').click(...)


ou déclarer un événement global au début:

$(document).on('click', '.fiche', function(){ ... });


Cette 2ème méthode remplace le "live" qui s'utilisait dans des versions antérieures de jquery:
http://api.jquery.com/live/
Modifié par loicbcn (29 Jul 2014 - 08:51)
merci @loicbcn pour cette 2e solution que je découvre, c'est plus propre que ma solution, je l'adopte.