Bonjour,

J'ai un soucis avec une fonction. 

// Suppression d'une ville 
$('.cityinfo').on('click', '.deletecity', function ()
{
	console.log('test');
	// On récupère l'ID à supprimer
	var div = $(this).closest('div');
	var id 	= $(this).closest('div').find('.id').val();
	
	console.log(id);
	// Si la div n'est pas enregistrée dans la base de données
	if(typeof id == 'undefined')
	{
		div.remove();
		console.log('non enregistré');
	}

	// Si les données sont enregistrées, on commence par supprimer de la BDD puis on supprime la div
	else 
	{
		// Ici suppression en Ajax de la ville et du texte, après confirmation (en cas d'erreur)
		$.ajax(
			{
				url: 'addtravel.php',
				method: 'POST',
				data: {
					deletecity: 1,
					id: id
				},
				success: function() {
					div.remove();
				},
			}
		);
	}
});

J'ai une fonction qui utilise Ajax pour ajouter des div de classe .cityinfo. Chacune de ces div possède un bouton de suppression de classe .deletecity. Lorsque la div est chargé avec la page et contient des données de la BDD, ma fonction AJAX fonctionne bien, mes données sont supprimées de la BDD puis la div disparaît.

 Par contre, lorsque j'essaie sur une div nouvellement ajoutée (via Ajax) rien ne se passe. J'ai mis un console.log('test'); pour vérifier si la fonction se lançait et : non, rien ne se passe. J'imagine donc que, ma div nouvellement créée n'est pas affectée par la fonction jQuery. Mais pourquoi ?

Par avance merci de votre aide

Salut. Oui c'est un problème récurrent, la solution serait de mettre le listener sur un élément parent qui existe à tout moment. Typiquement

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

Salut, ton dysfonctionnement a l'air de provenir de l'aspect asynchrone de JS. Lorsque tu créais un élément en JS il n'existe pas dans le DOM pour toute autre action qui l'a précédé ou a été appelé en même temps. Le plus simple est de segmenter ton code en fonction logique,  et d'appeler ces fonctions à l'intérieur des autres fonctions un peu comme une cascade. 

Personnellement je met toutes mes fonctions dans un objet App= {}. Dans cet objet, je met mes différentes fonction que je souhaite charger à l'affichage de mon DOM, en débutant dans un fonction init que j'appel en dehors de mon objet.

App = {

init: () => {}

}



$(app.init)

En dehors de app.init j'intègre mes fonctions que je veux traiter au cas par cas, et à la fin de ces fonctions j'appel la fonction qui doit être utilisé, un peu comme un effet domino. 

kulturman a écrit:

Salut. Oui c'est un problème récurrent, la solution serait de mettre le listener sur un élément parent qui existe à tout moment. Typiquement

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

Merci !

Mzalbil, je vais me pencher sur ta solution également, merci

La solution de kulturman est plus un pansement, elle est valide pour le moment, mais attention elle peut sauter d'un moment à l'autre, c'est important de maitriser l'asynchrone sur js