jquery1.7 passage de live() à on() capricieux sur éléments créés [Résolu]

[berlo44]

bonjour

J'essaie de convertir une méthode live() en on() en passant à jquery 1.7, mais c'est capricieux.

J'ai 3 niveaux de tableaux imbriqués où je peux cloner les lignes pour chaque niveau. Le dernier niveau contiennent une boite de sélection, en simplifiant, le html est ainsi :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table class="tab1">
 <tbody >
  <tr> <-- 1er niveau
   <td>
    <table  class="tab2">
      <tbody>
        <tr> <-- 2ème niveau
         <td>
          <table class="tab3">
           <tbody >
            <tr> <-- 3ème niveau
              <td><select></select></td> <-- boite de sélection ici
            </tr>
            </tbody>
          </table>
         </td>
        </tr>
       </tbody>
      </table>   
     </td>
    </tr>
 </tbody>
</table>

et après clonage avec un append() d'une ligne d'un niveau donné, j'obtiens le comportement suivant sur les nouvelles boîtes de dialogue :

Code :

1
2
3
$('table.tab3 select').live('change', function(){
....(fonctionne très bien avec les 3 niveaux)
});

Code :

1
2
3
4
$('table.tab3').on('change', 'select', function(){
...(ne fonctionne pas avec les clones de niveau 1 et 2)
...(fonctionne avec les clones de niveau 3)
});

J'ai loupé quelque chose ou c'est un bug ?

merci

[Bovino]

Attention, telle que tu l'as écrite, la méthode on() n'est pas équivalente à live() mais à delegate(). La différence étant que live() attache en fait l'événement à document alors que delegate() l'attache à la collection passée en référence (celle qui appelle la méthode).
De ce fait, ta réécriture n'affecte pas les éléments si la balise tab3 n'existe pas au départ.

D'autre part, la méthode clone() peut prendre deux arguments booléens, le premier précisant s'il faut copier aussi les événements liés à l'événement cloné, le second s'il faut aussi copier les événements des éléments contenus dans la balise clonée.

[berlo44]

ben voilà, bien vu Bovino, j'avais bien loupé quelque chose.

Pour que cela fonctionne sur les clone de niveau 1,2 et 3, il fallait ecrire :

Code :

1
2
3
$('table.tab1').on('change', 'select', function(){
...
});

et non

Code :

1
2
3
4
$('table.tab3').on('change', 'select', function(){
...(ne fonctionne pas avec les clones de niveau 1 et 2)
...(fonctionne avec les clones de niveau 3)
});

En effet dans ce cas, je clonais un ligne d'un tab3 existant et du coup cela fonctionnait. Mais si je clonais une ligne de tab2, cela ne fonctionnait plus dans les nouveaux tab3. Tous s'explique !

merci bien.

edit : je suis passé à clone(true) au lieu de clone(), cependant cela ne semblait pas nécessaire, ça fonctionne aussi avec clone(), mais bon dans le doute, autant fixer les choses convenablement.