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().

Invité · 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

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

jQuery

Discussions similaires

Partager

Partager