.on("click", ..) se répète a l'infini.

Version imprimable

Bonjour,

J'ai ce bout de code qui s'appel en boucle lors d'un seul click sur l'élement concerné:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
      $("#TopTable tbody tr").on('click', function (e) {
         $.ajax({
            url: "Home/SetSelectedIndex",
            data: { index: this.rowIndex },
            cache: false,
            type: "GET",
            timeout: 10000,
            success: function (result) {
               RefreshTable("#BotTable", "/Home/GetBotTable", "bot");
            }
         });
      });

Quelqu'un saurait comment éviter cela ?
Merci.

24/06/2013, 09h51
SpaceFrog

il n'y a pas de raison particulière dans le code que tu nous montre...

que fait RefreshTable ?

J'utilise le pluggin Datatable. Pour refresh mes deux tableaux (top et bot), j'utilise ces fonctions:

Init click

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
 
function ClickHandling(table) {
   if (table == "top") {
      $("#TopTable tbody tr").on('click', function (e) {
         $.ajax({
            url: "Home/SetSelectedIndex",
            data: { index: this.rowIndex },
            cache: false,
            type: "GET",
            timeout: 10000,
            success: function (result) {
               RefreshTable("#BotTable", "/Home/GetBotTable", "bot");
            }
         });
      });
   }
   else if (table == "bot") {
      $('#BotTable tbody tr').on('dblclick', function () {
         $.ajax({
            url: "Home/ChangeState",
            data: { index: this.rowIndex },
            type: "GET",
            success: function (result) {
               RefreshTable("#BotTable", "/Home/GetBotTable", "bot");
            }
         });
      });
   }
}

Refresh table

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function RefreshTable(tableId, urlData, bar) {
   if (CanRefresh) {
      $.ajax({
         url: urlData,
         data: {},
         cache: false,
         type: "GET",
         timeout: 10000,
         success: function (result) {
            table = $(tableId).dataTable();
            table.fnDraw();
            if (bar == "top")
               UpdateProgressBar(result);
            else
               UpdateStateProgressBar(result);
 
            ClickHandling(bar);
 
         }
      });
   }
}

Lorsque je click sur une ligne du tableau d'en haut (master) j'appel SetSelectedIndex qui mémorise l'index de la ligne sur laquelle j'ai cliké.
En suite dans le success j'appel RefreshTable pour la table du bas (esclave) qui va chercher les informations grace à l'index selectionné via GetBotTable.
En suite je rafraichit mes progressbas et réinitialise l'évenement de click.

En plaçant des breakpoints dans le code je me suis rendu compte que SetSelectedIndex n'est jamais appelé alors que GetBotTable oui.

24/06/2013, 10h40
danielhagnoul

Gestionnaires d'événements dans une fonction !

Chaque fois que la fonction ClickHandling(table) est appelée, vous créez un nouveau gestionnaire d'événement "click" ou "dblclick" !
24/06/2013, 10h46
Invité

Hmmmm oui ^^'
Mais sans cela, ça ne fonctionne pas :(
L'evenement n'est pas détecté.
24/06/2013, 10h59
SpaceFrog

délégation d'evenement avec on() ou delegate() ...
24/06/2013, 11h06
Invité
C'est justement ce que j'utilise. On et delegate font exactment la meme chose (cf. ici), seul l'ordre des paramèrtes est different. Au cas ou, j'ai essayé les deux mais cela ne confionne toujours pas.
Code:

1 2 3 $("#TopTable tbody tr").on('click', function (e) { alert("click"); $.ajax({....
N'affiche rien.
24/06/2013, 11h49
Invité
Je commençait a m'en douter depuis un moment, le preblème venait du pluggin datatable.
Pour que l'evenement fonctionne, il faut que je l'attache a la table dirrectement apres son initialisation:
Code:

1 2 var TopTable = $("#TopTable").datatable(); TopTable.on("click", "tbody tr", function () { ... });