Gérération html via PHP - dom dynamic ?

Hello

Je génère un tableau <table> en php que j'affiche lors d'un click sur le boutton le tout via ajax.

Jusque la pas de soucis.

Contexte : J'ai mis un glyphicon pour chaque ligne via boostrap, et coté jquery j'ai un simple .on("click") sur mon glyphicon et un console.log("test").

Problème : Vu que le html <table> est généré en php, APRES le chargement du dom, le click sur le glyphicon ne fonctionne pas ! même si je met une fonction test() en javascript et que je l'utilise "inline" avec onclick="test()" le console me dit que la function test() n'existe pas. Alors que Si ! lol

Je pense que vu que la <table> est générer en Ajax, le dom n'est pas parser et donc il n'arrive pas à capté le glyphicon dans le dom. Comment faire ?

Comment utilisé du javascript sur du html générés après le chargement du dom ?
Modifié par JENCAL (20 Jul 2018 - 10:56)

Première piste pour mes essaies : fonction native load() en jquery.


EDIT :

merde.... même si je fais load.... y'a pas mon html.. je fais un .html() puis .load mais le load me load pas ce que je viens d'ajouter via mon .html...
Modifié par JENCAL (20 Jul 2018 - 11:36)

J'ai ceci en ajax :

		$.ajax({
			url: $(this).data( "path-link-qds" ),
			method : "post",
			data : {"dateDu":dateDu,"dateAu":dateAu,"codFour":codFour,"codPack":codPack},
			datatype: "html",
			success: function(result){
				$("#div-qds-table-consul").css("display","block");
				$("#div-qds-table-consul").html(result);
				$('#div-qds-table-consul').load(result);
			}
		});

le load marche pas.... app-back.js:9675 GET http://blablabla.com/app_dev.php/blabla/%3Ctable 404 (Not Found)

result est enfaîte un <table></table> remplie.

bazooka07 a écrit :
A la fin de la fonction success, ajouter

$('#div-qds-table-consul .glyphicon').on('click', test);

Il faut que le glyphicon existe dans le DOM avant de dire JQuery de gérer l'évènement onclick

Merci à toi , je ne savais pas que "simuler" un click à l'intérieur du succes fonctionnait..... je ne comprend pas la différence du click à l'exterieur / intérieur du success... du coup avec ta méthode pas de problème, on dirait que la simulation du click dans le success à "charger" celui ci dans le dom... car maintenant mon click "en dehors" d'ajax fonctionne bien.........
J'avoue être un peu perdu sur le pourquoi c'est résolu. Mais merci à toi !
Modifié par JENCAL (20 Jul 2018 - 12:11)

Avant de demander à Jquery d'attacher l'évènement 'click' à un élément du DOM, il faudrait d'abord que cet élément existe.

Tu auras le même problème si tu fais une mise à jour de tout le tableau de façon dynamique.

Oui ça c'est ce que j'ai écris dès le début. Qu'il faille que l’élément existe (d'où ma recherche sur load())..

Ma question est juste, en quoi "click" (le click dans le success) ? fait-il vivre l'élément ??
Modifié par JENCAL (20 Jul 2018 - 15:25)

C'est pas le click qui fait vivre.
C'est l'ajax qui pemet d'insérer l'élément dans le DOM.
Tant que cela n'est pas fait, Jquery ne connait cet élément et il n'attend pas après l'Ajax .

Pourtant, j'insère bien l'élèments dans mon success en faisant :

$("#div-qds-table-consul").html(result);

... et cela ne fonctionne pas. Je ne comprend pas pourquoi la ligne avec le on('click') fait vivre l'élement plus que le .HTML()