addEventListener avec éléments créés dynamiquement
Bonjour
J’ai des éléments créées automatiquement après la sélection dans un champ de recherche avec autocomplete.
Je fais ensuite un addEventListener pour changer des paramètres au clic et au survol.
Ma variable liste qu'écoute le addevent listener est correctement définie comme me l'indique la console.
Mais rien ne se produit.
Auparavant, mes éléments étaient créés par une boucle PHP et cela fonctionnait correctement.
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <script type="text/javascript">
// ***********************
// AJAX Autocomplete JQUERY UI
// *********************
var nom="";
var fonction=""
var id=0;
$('#recherche').autocomplete({
source :'liste_inter.php',
select : function(event, ui){ // lors de la sélection d'une proposition
nom=( ui.item.label );
photo=( ui.item.photo );
id=( ui.item.id );
$( "#liste-inter").append("<li class='col-lg-3 col-md-4 col-sm-6 col-xs-12 choix bloc-intermittents' data-select='non' id=id><input type='hidden' name='select[]' value='non'><div class='col-xs-12 ' style='opacity:0.7;' ><div class='img-liste' id='img"+id+"'></div><div class='texte-bloc-intermittents' id='texte-inter"+id+"'></div><div class='col-sm-9 '></div><input type='hidden' name='interid[]' id='hidden' value='"+id+"'></div></li>" );
$("#texte-inter"+id).html("<strong>"+nom+"</strong>");
$("#img"+id).html("<img src='images/"+photo+"' class='col-xs-4' style='max-height: 5rem;'>");
fonction=( ui.item.fonction ); // ajout de la fonction
}
});
</script>
<script type="text/javascript">
// ********************************
// Ecoute des éléments pour valider
// ********************************
var list=document.getElementsByClassName("choix");
var i=0;
// fonction détection périphérique tactile
function isTouchDevice() {
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
//si périphérique tactile fonction touch au lieu de click
if (isTouchDevice() === true) {
for(i=0;i<list.length;i++){
list[i].addEventListener('touchend', function(){
if (this.dataset.select=="non") {
this.firstChild.value = '11';
this.dataset.select="oui";
this.style.backgroundColor='#F2C86D';
this.style.color='#2955A5';
this.style.opacity="1";
}else if (this.dataset.select=="oui"){
this.firstChild.innerHTML = '<input type="text" name="select[]" value="non">';
this.dataset.select="non";
this.style.backgroundColor='#696969';
this.style.color="#C4C4C2";
this.style.opacity="0.7";
}
}, true);
}
} else {
// Sinon c'est un périphérique avec souris
for(i=0;i<list.length;i++){
list[i].addEventListener('mouseover', function(){
this.style.cursor = "pointer";
});
list[i].addEventListener('click', function(){
if (this.dataset.select=="non") {
this.childNodes[1].value = 'oui';
this.dataset.select="oui";
this.style.backgroundColor='#F2C86D';
this.style.color='#2955A5';
this.style.opacity="1";
}else if (this.dataset.select=="oui"){
this.childNodes[1].value = 'non';
this.dataset.select="non";
this.style.backgroundColor='#696969';
this.style.color="#C4C4C2";
this.style.opacity="0.6";
}
}, true);
}
}
</script> |
