Discussion :

[Arsene12]

Bonsoir, j’extrais des données d'une base de données locale et insère des lignes comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 db.version(1).stores({friends: "++id, number, text,", });
 
   db.friends
  .each (function (friend) {
 
   if (friend.number === "1")  {       
  $('#name').append('<td class="maClass" id="monId'+friend.id+'">'+friend.text+'</td>');  
   };
  $(".maClass").unbind().click(function() {	 
	 // CODE 	 	 
	 }); 	 
  }

Mon problème est que je redéfinis la classe pour chaque élément et ça fait perdre un temps fou.

Si je déclare la classe en dehors de each ça ne marche pas. Sauriez-vous svp comment procéder pour éviter d'avoir à redéclarer la class à chaque fois?

Merci d'avance pour votre aide.

Arsène

[Toufik83]

bonsoir,
désolé si j'avais mal compris ton soucie, mais si tu n'as pas besoin de la classe 'maClass' pourquoi la déclarer?
et pourquoi vous faites un unbind() et un click() juste après append() ?

[Doksuri]

et pourquoi vous faites un unbind() et un click() juste après append() ?

surement car les elements rajoutes dynamiquement ne sont pas pris en compte par sont .click() deja defini
=> pour palier a ce probleme, il faut faire ainsi :

Code javascript :

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

$(document).on("click", ".maClass", function() { console.log("clicked"); });

[Toufik83]

surement car les éléments rajoutes dynamiquement ne sont pas pris en compte par sont .click() déjà défini

la déclaration du click vient après que l'élément soit ajouté, donc je ne pense pas qu'il est obligé de passer par la délégation:

Code :

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

$(document).on("click", ".maClass", function() { console.log("clicked"); });

[NoSmoking]

Bonjour,

Mon problème est que je redéfinis la classe pour chaque élément et ça fait perdre un temps fou.

je ne vois pas trop en quoi cela peut être gênant !?!

Dans ce cas toutefois je me passerais des classes attendu que si toutes les ID sont de la forme id="monId'+friend.id+'">, il te suffit de cibler en CSS les éléments concernés comme suit

Code css :

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

1
2
3
[id^="monId"] {
  /* le style à appliquer */
}

[Arsene12]

(document).on("click", ".maClass", function() { console.log("clicked"); });

Merci beaucoup pour le $(document).on("click", ".maClass"... Ça marche impeccable.

C'est très utile lorsque .maClass comprend du code javascript et pas uniquement du css.