Discussion :

[Khleo]

Bonjour,

Lors d'une requête ajax j'injecte de html dans ma page et je souhaite que mon jquery soit applicable sur cette injection.

Pour ça j'utilise .on()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$('body').on('click', '#saveInformations', function() {
	$.ajax({
		type: 'POST',
		url: '/home/ajaxsaveinformations/',
		dataType: 'text',
		success: function (result) {
			if (result != "error") {
				$("#newDoc").append(result);
			}
		}
	});
});

seulement ça ne fonctionne pas, aucune action n'est disponible lorsque je clique sur mon nouveau élément.

[Darkaurora]

Je pense qu'il s'agit d'un problème d'initialisation de ton événement. Si tu déclare ton .on( ) avant ton injection via ajx c'est normal que tu ais ce problème.

Pour le résoudre (en supposant que j'ai raison sur les fait précédent), soit tu déclares tes événements après ton injection, tes éléments étant dans le DOM, l'événement s'attachera...

Soit tu modifies ton initialisation avec une précision (sorte de condition)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$( document ).on( 'click', '#MyElt', function( ) {
  console.log( 'coucou' )
} );

Ici tu attache l'événement "click", a ton document et non a l'élément, cependant l'événement ne sera exécuté uniquement si tu as cliqué sur "#MyElt".

Si tu as déclaré : $( '#MyElt' ).on( 'click', function( ) { console.log( 'coucou' ); } ); tu pourras déclarer autant d'événement que tu souhaites sur l'élément "#MyElt", si il n'existe pas il ne se passera rien.

[Khleo]

J'ai essayé avec le $(document) mais ça ne passe pas non plus, la function est bien appelée mais l'html injecté n'est pas interpretable par le navigateur. Ca peut venir du faite que le code est injecté via une requête ajax ? peut être faut-il rajouter une instruction dans le success juste après le .append() non ?

[Darkaurora]

un dataType: html pourrait peut être résoudre le problème.

Je suppose également que tu as volontairement raccourcis l'url passé non ?

[Khleo]

Oui j'ai supprimé les data pour éviter de surcharger le code.

Même en mettant html ça ne passe pas mieux.

Il n'existe pas une instruction en Jquery pour recharger le DOM de toute la page ?

[Khleo]

C'est bon j'ai trouvé,

Il ne fallait pas appliquer le .on() lors de l'appel de requête ajax mais lorsque je clic sur l'élément injecté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
	$(document).on('click', '.technicalDoc',
 
		function() {
 
			$("#newDocument").hide();
			$(".docOptions").show();
			$("#informationsPanel").hide();
 
		}
 
	);

tout semble plus logique...