UI Autocomplete. Abscence d'évènement sur un nouvel élément du DOM

fred_fifer · 20/07/2011, 20h31

Tout d'abord bonjour,
je suis un utilisateur de ce forum ou je trouve parfois mon bonheur mais c'est ma 1ère intervention alors tout d'abord merci à vous pour vos contributions.

Sinon passons au vif du sujet :
ça me gave et google ne m'aide pas trop :-p

en javascript-jquery, comment fait-on pour créer un input (ou autre bien sûr) qui gère les évènements comme d'autres input, crée au lancement de la page, ayant la même class...

En gros j'ai un input class="toto" avec un autocomplete.
Qd je sélectionne un élément de ma liste, ça me crée un autre input en dessous avec la class="toto" mais mon autocomplete ne fonctionne pas dessus (ni d'autres évènements d'ailleurs)

Donc comment fait-on pour que des évènements soient actifs sur des élément crées via javascript et non crées au lancement de la page ?

Merci à vous ;-)

Ce sera surement plus parlant si je vous mets mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function() {
 
	$(".toto").autocomplete({
		url: 'search.php',
		sortFunction: function(a, b, filter) {
			var f = filter.toLowerCase();
			var fl = f.length;
			var a1 = a.value.toLowerCase().substring(0, fl) == f ? '0' : '1';
			var a1 = a1 + String(a.data[0]).toLowerCase();
			var b1 = b.value.toLowerCase().substring(0, fl) == f ? '0' : '1';
			var b1 = b1 + String(b.data[0]).toLowerCase();
			if (a1 > b1) {
				return 1;
			}
			if (a1 < b1) {
				return -1;
			}
			return 0;
		},
		showResult: function(value, data) {
			return '<span style="color:red">' + value + '</span>';
		},
		onItemSelect: function(item) {
			$('.toto').after('<br><input class="toto" type="text">');
		    var text = 'Votre choix :';
		    if (item.data.length) {
		        text += ' <i>' + item.data.join(', ') + '</i>';
		    }
		    $("#last_selected").html(text);
		},
		maxItemsToShow: 20
	});
});

Code html :

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

1
2
3
4
5
6
7
8
<body>
	<form>
		<input type="text" class="toto">
	</form>
	<p><span id="last_selected"></span></p>
  <hr>
 
</body>

Bovino · 20/07/2011, 22h13

live() ou delegate().

galerien69 · 20/07/2011, 22h15

salut,

ben tu n'as qu'a rappeler autocomplete :
//blabla

Code :

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

1
2
3
4
onItemSelect: function(item) {
var myNewInput = 'input_'+time();//ou un truc dans le genre
$('.toto').after('<br><input class="toto" id="'+myNewInput'+"type="text">');
$('#'+myNewInput).autocomplete(//stuff);

ya aussi une méthode pour créer le noeud (input) directement et d'en garder la référence. Ensuite tu l'insères dans le DOM, puis tu active l'autocomplète dessus.
Mais je sais plus comment on fait en jquery.

edit : un peu lent.
live ou delegate impliquent de trigger un event depuis l'onItemSelect. N'est-ce pas dommage?

danielhagnoul · 21/07/2011, 00h32

Bonsoir

En général, si vous modifiez le UI Accordion de quelque manière que ce soit, il faut le détruire et le reconstruire objAccordion.accordion("destroy").accordion(objAccordionOptions);.

Voir cette discussion : http://www.developpez.net/forums/d10...ccordion-vide/

Vous vous retrouvez avec deux "input" ayant la classe "toto" mais l'UI Autocomplete ne connaît que celui sur lequel il a été construit.

Si après le choix de l'utilisateur, vous voulez afficher des informations complémentaires, il faut mieux utiliser un textarea. Voir la démonstration et le code source : http://jqueryui.com/demos/autocomplete/#remote

20/07/2011, 22h13	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	live() ou delegate(). __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

21/07/2011, 00h32	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir En général, si vous modifiez le UI Accordion de quelque manière que ce soit, il faut le détruire et le reconstruire objAccordion.accordion("destroy").accordion(objAccordionOptions);. Voir cette discussion : http://www.developpez.net/forums/d10...ccordion-vide/ Vous vous retrouvez avec deux "input" ayant la classe "toto" mais l'UI Autocomplete ne connaît que celui sur lequel il a été construit. Si après le choix de l'utilisateur, vous voulez afficher des informations complémentaires, il faut mieux utiliser un textarea. Voir la démonstration et le code source : http://jqueryui.com/demos/autocomplete/#remote __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email