UI Autocomplete. Abscence d'évènement sur un nouvel élément du DOM
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:
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:
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> |
