Bonjour,

j'ai un souci en ce qui concerne les évènements d'éléments html crée dynamiquement.

du code vaut mieux que de belle parole.

Voici l'évènement click d'un de mes liens. (à savoir qu'au premier chargement de la page, des services sont déjà affichés à l'écran et que l'évènement click marche pour ces services, mais pas pour les suivants (système de pagination avec ajax).

Le code de la pagination ce trouve après.

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
$(function () {
 
 
    $('.hideJs').hide();
 
    /*-----------------------------------------------------------------------------------------------------------------*/
 
    //On test si la page à été réactualisée. Si c'est le cas, c'est qu'une session contenant une liste est présente et donc un apperçu existe déjà
    //Il suffit de l'afficher
    SiSessionListeExist();
 
    /*-----------------------------------------------------------------------------------------------------------------*/
 
    $('.LienAjoutListe').on("click",function (e) {
 
        e.preventDefault();
 
        var IdItem = $(this).data('iditem');
        var NomItem = $(this).data('nomitem');
        var TypeItem = $(this).data('typeitem');
        var TypeLst = $(this).data('typelst');
        var PrixServ = $(this).data('prixserv');
 
        //On compte le nombre de ligne du tableau d'aperçu
        var NbreTr = $('#TabAppercuLst tr').length;
 
 
        //S'il n'y a que la ligne de titre, on initialise le tableau
        if (NbreTr == 1)
            InitialiserApercu(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
        else {
            // On vérifie que le service n'est pas déjà présent dans l'aperçus.
            if ($('#ApercuListe').find('#IdItem' + IdItem + '').length) {
 
                //On met à jour la quantité
                UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
            else {
                //On insère une nouvelle ligne
                InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
        }
    });
 
 
    /*-----------------------------------------------------------------------------------------------------------------*/
 
    //On écoute l'évènement change des input type=number (les quantités) du tableau d'aperçu, car les ligne du tableau on été ajoutée dynamiquement et ne sont pas dans le DOM de départ
    $('#TabAppercuLst').on("change", 'input[type="number"]', function (e) {
        e.preventDefault();
 
        var IdItem = $(this).data('iditem');
        var NomItem = $(this).data('nomitem');
        var TypeItem = $(this).data('typeitem');
        var TypeLst = $(this).data('typelst');
        var PrixServ = $(this).data('prixserv');
 
        var valeur = $(this).val();
 
        if (valeur == 0)
        {
            DeleteListLine(IdItem);
 
            if($('#TabAppercuLst tr').length == 1)
                $('#ApercuListe').fadeOut(1200);
 
        }
        else
            UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst, true);
    });
 
 
    /********************************************************* LES FONCTIONS *******************************************************/
 
    /*********************************************************************/
    /*  Initialise l'apercu de liste pour la première fois               */
    /*********************************************************************/
 
    function InitialiserApercu(IdItem, NomItem, PrixServ, TypeItem, TypeLst) {
        $('#ApercuListe').fadeIn(1200);
        $('#btValidList').fadeIn(1200);
        $('#AucunItemLst').hide();
 
        InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
    }
 
 
    /*********************************************************************/
    /*  Insère dynamiquement une nouvelle ligne dans le tableau d'apercu */
    /*********************************************************************/
 
    function InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst) {
        $('#TabAppercuLst').append('<tr id="LineItem-' + IdItem + '">' +
                                   '    <td id="IdItem' + IdItem + '" style="display:none">' + IdItem + '</td>' +
                                   '    <td>' + NomItem + '</td>' +
                                   '    <td> <input type="number" class="QteNumber" id="Qte-' + IdItem + '" value="1" min="0" style="width:70px;" data-iditem="' + IdItem + '" data-nomitem="' + NomItem + '" data-typeitem ="' + TypeItem + '" data-typelst="' + TypeLst + '" data-prixserv="' + PrixServ + '" /> </td>' +
                                   '    <td id="prix' + IdItem + '">' + PrixServ + '</td>' +
                                   '</tr>');
 
        //On créer la liste avec actif = false (seulement si la liste n'est pas encore crée) et on créer la ligne de liste en DB
 
        $.post('../../GestionListe/CreateOrUpdateLigneListe',
                {
                    pItem: IdItem,
                    Qte: 1,
                    prixItem: PrixServ,
                    prixLigne: PrixServ,
                    cote: 4,
                    typeItem: TypeItem,
                    nomItemV: NomItem,
                    typeLst: TypeLst
                });
    }
 
 
    /*********************************************************************/
    /*  Met à jour la quantité d'un service, si ce service est déjà dans */
    /*  l'aperçu de liste                                                */
    /*********************************************************************/
 
    function UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst, decrease) {
 
        var ValueNumber = $('#Qte-' + IdItem + '').val();
 
 
        if (typeof (decrease) == 'undefined')
            decrease = false
        //on fait ++ et on modifie la valeur de l'input dans le cas ou l'utilisateur aurai cliqué sur le lien "Ajouter à la liste"
        if (!decrease) {
            ValueNumber++;
            $('#Qte-' + IdItem + '').val(ValueNumber);
        }
 
 
        //Calcul du nouveau prix de ligne
        var prix = ValueNumber * PrixServ;
 
        //Modification du total dans l'aperçu de liste
        $('#prix' + IdItem).html(prix);
 
        //mise à jour de la ligne de liste en DB
        $.post('../../GestionListe/CreateOrUpdateLigneListe',
              {
                  pItem: IdItem,
                  Qte: ValueNumber,
                  prixItem: PrixServ,
                  prixLigne: prix,
                  cote: 4,
                  typeItem: TypeItem,
                  nomItemV: NomItem,
                  typeLst: TypeLst
              });
    }
 
    /*********************************************************************/
    /*  Si la quantité d'une ligne de l'aperçu de liste est à 0, on      */
    /*  supprime la ligne de la liste en DB                              */
    /*********************************************************************/
    function DeleteListLine(idItem) {
 
 
        $('#TabAppercuLst').find('#LineItem-' + idItem).remove();
 
        $.post('../../GestionListe/DeleteLigneListe',
              {
                  pItem: idItem,
              });
    }
 
 
    /*********************************************************************/
    /*  Test si une session de liste existe en cas de réactualisation de */
    /*  la page. Si c'est el cas, c'est qu'un aperçu de liste est déjà   */
    /*  crée, il suffit juste de l'afficher                              */
    /*********************************************************************/
 
    function SiSessionListeExist() {
        if ($('#TabAppercuLst tr').length > 1) {
            $('#ApercuListe').fadeIn(1200);
            $('#btValidList').fadeIn(1200);
            $('#AucunItemLst').hide();
        }
    }
 
});
et voilà le code de pagination (ici il ne gère que le système de filtre par thème de mes services à afficher).

Ce code est mis dans un autre fichier .js.

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
/// <reference path="../../jquery-1.5.1.min.js" />
 
$(function () {
 
    $('#ThemePagination').change(function (e) {
        alert("je suis dedans");
        var commune = $(this).data('commune');
        var typeLst = $(this).data('typelst');
 
        var recup = $(this).val();
        //var text = $('option[value="' + recup + '"]').text();
 
 
        //On récupère les données du thème, on vide le div contenant les services et on le re-remplit avec les nouveaux services
        $.post('../../GestionPagination/GererFiltrePaginationCreateListe',
              {
                  IdThemeSelection: recup,
                  typeLst: typeLst
              },
              function (data) {
                  viderServiceAff();
 
                  if (data.length > 0)
                      remplirConteneurService(data, commune, typeLst);
                  else
                      alert("Aucune donnée n\'a été trouvée");
              }
        );
    });
 
 
    /**************************************************************************LES FONCTIONS********************************************************/
 
    /*****************************************************************/
    /* Vide le div qui contetien tous les services                   */
    /*****************************************************************/
 
    function viderServiceAff() {
        $('#ConteneurPagination').empty();
    }
 
    /*****************************************************************/
    /* Rempli le div qui contient les services avec les services     */
    /* du thème choisi                                               */
    /*****************************************************************/
 
    function remplirConteneurService(data, nomCommune, typeLst) {
 
        var cpt = 0;
 
        while (cpt < data.length) {
            $('#ConteneurPagination').append(
                '<div style="width:230px; border:1px solid black; display:inline-block; vertical-align:top; margin-bottom:5px; margin-right : 5px;"> ' +
                '   <div> ' +
                '           <div> ' +
                '               <img src="' + data[cpt].UrlImg + '" alt="Image item" title="Image item" style="width:50px; height:50px;"/> ' +
                '           </div> ' +
                '              <p style="margin:0px;">' + data[cpt].NomItem + '</p>' +
                '              <p style="margin:0px;">' + data[cpt].PrixCourantItem + '&euro; </p>' +
                '              <p style="margin:0px;"><a href="#">Lien détail</a></p>' +
                '              <p style="margin:0px;">importance</p>' +
                '              <p style="margin:0px;"><a href="#" class="VoirPrest" data-iditem="' + data[cpt].IdItemVendable + '" data-communeuser="' + nomCommune + '">Voir prestataire</a></p>' +
                '   </div>' +
                '        <a href="#" class="LienAjoutListe" data-iditem="' + data[cpt].IdItemVendable + '" data-nomitem="' + data[cpt].NomItem + '" data-typeitem ="1" data-typelst ="' + typeLst + '" data-prixserv="' + data[cpt].PrixCourantItem + '">Ajouter le service</a>' +
                '</div>'
            );
 
            cpt++;
        }
    }
 
});
Après ce code, une fois que la fonction remplirConteneurService() à été effectuée, l'affichage est correcte, mais mon évènement lié au lien "Ajouter le service" ne fonctionne plus car c'est du code dynamiquement ajouté.

J'aimerai donc savoir comment faire en sorte de lié l'évènement click à ce lien pour qu'il exécute mon évènement click programmé dans le premier code.



au cas ou ça pourrait aider, voici le code html affiché lors du tout premier chargement de la page. (code asp.net mvc3 (View))

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
//Filtre de sélection des Items à afficher.----------------------------------------------------------
   <form name="FormFiltreCreaLst" id="FiltreCreaLst" action="../../GestionPagination/GererFiltrePaginationCreateListe" method="post">
       <select id="ThemePagination" name="IdThemeSelection" data-commune="@NomCommune" data-typelst="@TypeList">
       @{
           foreach (ThemeService theme in LstTheme)
           {
               <option value="@theme.IdTheme">@theme.Theme</option>
           }
       }
           <option value="Pack">Les packs</option>
       </select>
   </form>
 
   //Système de pagination ------------------------------------------------------------------------------
 
   <div id="ConteneurPagination" style="margin-top:5px; border:5px solid black; padding:5px; padding-left:17px;">
       @{
           foreach(Service s in LstTheme[0].LstService)
           {
               <div style="width:230px; border:1px solid black; display:inline-block; vertical-align:top; margin-bottom:5px; margin-right : 5px;">
                   <div>
                       <div>
                           <img src="@s.UrlImg" alt="Image item" title="Image item" style="width:50px; height:50px;"/>
                       </div>
                       <p style="margin:0px;">@s.NomItem</p>
                       <p style="margin:0px;">@Math.Round(s.PrixCourantItem) &euro;</p>
                       <p style="margin:0px;"><a href="#">Lien détail</a></p>
                       <p style="margin:0px;">importance</p>
                       <p style="margin:0px;"><a href="#" class="VoirPrest" data-iditem="@s.IdItemVendable" data-communeuser="@NomCommune">Voir prestataire</a></p>
                   </div>
 
                   <a href="#" class="LienAjoutListe" data-iditem="@s.IdItemVendable" data-nomitem="@s.NomItem" data-typeitem ="1" data-typelst ="@TypeList" data-prixserv="@Math.Round(s.PrixCourantItem)">Ajouter le service</a>
               </div>
           }
 
           <div id="NavigationPagination" style="text-align:center;">
               @{
                   for (int cpt = 0; cpt < NbrePage; cpt++)
                   {
                       int num = cpt + 1;
                       <a href="#">@num</a>
                   }
               }
 
           </div>
           }
   </div>
Merci d'avance pour vos réponses.


ps : Si je n'ai pas été clair dans ma demande, n'hésitez pas à me le dire, j'essaierai de corriger.