JQuery - Problème de sélection

Bonsoir,

J'ai un petit problème que j'aimerais au plus vite résoudre, je fais donc appel à vous
Il s'agit d'un évènement onChange qui ne fonctionne pas.
Avant de faire le onChange, j'ajoute un champs sur la page avec cette fonction :

$("#ajout_objet").click(function () { 
		[..] // peu importe ce qui se passe juste pour que vous voyiez ce que j'introduit dans la page
		$('table tbody').append('<tr id="'+id+'"><td id="d'+id+'"></td><td><input type="text" name="n'+id+'" value="" /></td><td><input type="text" name="q'+id+'" value="" /></td></tr>');
	});

Ensuite donc je veux faire un onChnage sur les champs de texte introduit ci-dessus avec

$("table tr td input").change(function () {

Mais celà ne fonctionne pas. Aucune erreur ni rien d'après Firebug (firefox).

Une idée du problème ?

Bonjour,

Je suppose que la création des gestionnaires d'évènement pour les éléments du formulaire se fait au chargement de la page ($(document).ready()), et donc forcément avant l'insertion de nouveaux noeuds dans le DOM?

Auquel cas, la réponse est par ici:
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

Merci pour la réponse !
Je pense que ça doit être ça mais n'aurais-tu pas un exemple pour mon script car je ne comprends pas trop.

Merci !

Lunthear a écrit :
Je pense que ça doit être ça mais n'aurais-tu pas un exemple pour mon script car je ne comprends pas trop.

J'ai donné un lien qui propose des liens vers pas mal de documentation (articles notamment). Je sais que la lecture c'est pas glamour, mais ça aider à cerner un sujet.

Je ne comprends, je pense bien faire comme l'exemple donné ici mais ça ne fonctionne pas :S

function addItem () {
	
	$("img#ajout_objet")
		.unbind('click')
		.bind('click', function() {
			$('table#tableBody tbody').append($('<tr id="'+id_new+'"><td id="d'+id_new+'"></td><td><input type="text" name="n'+id_new+'" class="designation" value="" /></td><td><input type="text" name="q'+id_new+'" value="" /></td></tr>'));
			addItem();
	});
	
}

Et je fais bien

$(document).ready(function () {
	
	addItem();

[..]

Modifié par Lunthear (03 Dec 2008 - 14:51)

Alors si je comprends bien, après avoir ajouté une ligne à ton tableau tu rebind l'évènement onclick de ton bouton d'ajout de ligne (une image). La conséquence, c'est que ce bouton sera toujours actif après l'ajout d'une nouvelle ligne (même si pour le coup ça me semble totalement inutile, vu que l'ajout d'une nouvelle ligne n'est pas censé enlever le gestionnaire d'évènement sur ton image bouton).

Si maintenant le but était de rajouter un gestionnaire d'évènement sur certains éléments de la ligne de tableau que tu ajoutes... eh bien tu ne fais pas du tout ça, donc de toute évidence ça ne peut pas marcher.

Il ne faudrait pas plutôt ce genre de structure?

function bindStuff() {
	// Rajouter le gestionnaire d'évènement sur les éléments dans la ligne
	// de tableau, en testant au préalable s'il y a déjà un gestionnaire
	// d'évènement ou en le supprimant (unbind).
}
function addItem () {
	$("#ajout_objet").click(function(){
			$('table#tableBody tbody').append(bla_bla);
			bindStuff();
	});
}

// --------------

$(document).ready(function(){
	bindStuff();
	addItem();
});

Mais il vaut peut-être mieux utiliser une fonction de callback avec la méthode click?

function addItem () {
	$("#ajout_objet").click(
		function(){$('table#tableBody tbody').append(bla_bla)},
		bindStuff()
	);
}

Ça fonctionne, merci beaucoup !