2016-07-30 1 views
0

Ceci est mon JSSélection multiple de classes ne fonctionne pas

$('.normal-box').click(function(){ 
    //unique row id 
    var id = $(this).data('row-id'); 
    //its index according to the content array 
    var index = $(this).data('index'); 
    //which card does this row belong to 
    var card_name = $(this).data('id'); 
    var card; 
    console.log(id) //el id de noten es de por si "link last_updated" concatenado 
    switch(card_name){ 
     case "noten" : card = Unidos.CardManager.getCard(card_name); break; 
     case "nachricht" : card = Unidos.CardManager.getCard(card_name); break; 
     default : return false; 
    } 
    card.resetPriorityWhenClickedOn(id); 
}); 

Mon HTML

<script id="nachricht_card_row_template" type="text/html"> 
      <div class="normal-box" data-row-id="{{id}}"> 
         <div class="img-box"> 
          {{#if channel.image}} 
          <img src="{{channel.image}}" vspace="3"> 
          {{/if}} 
         </div> 
         <div class="subtitle-box" id="nachrichten-subtitle-box"> 
          <span class="options-title" id="title-text">{{channel.name}}</span> 
         </div> 
         <div class="side-text-box"> 
          <span class="side-text">{{formatDate datetime}}</span> 
         </div> 
         <div class="small-text"> 
          <div class="normal-text"><span class="text-formating">{{text}}</span></div> 
         </div> 
      </div> 
     </script> 

Mon CSS

.normal-box{ /*Container of other tiny boxes*/ 
    height: 70px; 
    border-bottom: 1px solid; 
    border-bottom-color: gainsboro; 
    overflow: hidden; 
    opacity: 0; 
    transition: opacity 0.5s ease 0.3s; 
} 
.normal-box.show{ 
    opacity: 1; 
} 

Comme vous pouvez le voir, je veux choisir le $('.normal-box), mais j'ai une autre fonction qui ajoute une classe qui est .normal-box show ... Avec le code ci-dessus, je ne peux faire que le .normal-box el NTS travail, pas le spectacle .normal-box ... Ce que je veux dire avec les clases show .normal-box: enter image description here

Je l'ai déjà essayé:

$('.normal-box, .normal-box show) 
$('.normal-box, .show) 
$('.normal-box.normal-box show) 
$('.normal-box.show) 

Aucun d'entre eux travaillent. Toute aide serait appréciée

+0

Tous les exemples de code "déjà essayés" manquent les guillemets fermants – j08691

+0

Non, je suis en train d'utiliser le fichier console.log (id) pour détecter le fonctionnement. Il ne fonctionne pas avec les éléments normaux de show-box, mais je ne reçois pas d'erreurs –

+0

Ceux d'écrire ici, je les ai essayés avec des guillemets fermants dans le vrai code –

Répondre

2

Normalement, $('.normal-box') correspond à tout élément qui a une classe normal-box à moins que les éléments sont ajoutés dynamiquement alors vous devez utiliser-délégation d'événements comme celui-ci:

$(document).on('click', '.normal-box', function(){ 
    //Your code here 
}); 

J'espère que cela aidera.

+0

Cela fonctionne maintenant, merci! –

+1

Vous êtes les bienvenus. Si cela résout le problème, veuillez le marquer comme accepté (afin que les personnes confrontées au même problème à l'avenir puissent le repérer facilement). –

0

Essayez cette

$('.normal-box.show'); 
+0

Ne fonctionne toujours pas et les éléments de la boîte normale ne fonctionnent plus –

+0

Cela ne résoudra pas le problème car ce '$ ('. Normal-box')' correspond toujours ''

'!!!! –

+0

@SebastianAmpueroMorisaki sont les DIV ajoutés dynamiquement? –