addEventListener avec éléments créés dynamiquement

**rvm31** · 09/01/2016, 21h33

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 :

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
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>

**NoSmoking** · 10/01/2016, 10h11

Bonjour,
pourquoi ne pas utiliser les fonctionnalités de la librairie jQuery que tu charges pour ton autocomplétion ?

**rvm31** · 10/01/2016, 18h36

pour essayer simplement j'ai fait ça, mais même résultat sur les éléments créés avec Jquery
Je crée un élément dur dans le HTML et là le script fonctionne.

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
<script type="text/javascript">
// ***********************
 
// AJAX Autocomplete
 
// *********************
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='bloc"+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
            }
 });
var list=document.getElementsByClassName("choix");
var i=0;
 
$(function() {
    $('#bloc'+id ).click(function() {
    	alert();
      $( this ).toggleClass( ".bloc-intermittents-select", 1000 );
    });
  });
</script>

si je fais un onclick directement dans l'élément créé pour appeler une fonction ça réagit, j'ai mon alerte

Code :

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

$( "#liste-inter").append("<li class='col-lg-3 col-md-4 col-sm-6 col-xs-12 choix bloc-intermittents' data-select='non' id='bloc"+id+"' value-num="+id+" onclick='togclasse()'><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>" );

Mais maintenant je veux envoyer à ma fonction togclass l'identifiant unique de l'élément <li> créé afin d'effectuer le changement de classe sur celui cliqué.
J'ai essayé l'id mais c'est une variable renouvelée à chaque élément et la var id renvoie le dernier créé.