L'icône de table Accordéon imbriquée ne change pas lorsque l'ID de classe est programmé

Question

J'ai des tables d'amorces d'amorçage imbriquées dans une page Grails .gsp qui fonctionnent correctement, sauf pour l'icône qui passe d'un "+" à un "-" lors de la réduction/expansion. Je peux le faire fonctionner si je supprime les variables d'identifiants dynamiques et que je mets statiquement l'identifiant de cible de données au lieu d'utiliser data-target = "# $ {orgs.ORGN}" et id = "$ {orgs.ORGN}". L'icône ne changera pas quand je laisserai le g: chaque boucle créer les identifiants et les données, bien qu'ils se replient correctement. Des pensées? Y at-il quelque chose à propos de la définition des ID à la volée qui ne fonctionnera pas?

<div class="col-lg-8"> 
<div class="panel panel-default"> 
    <div class="panel-heading"></div> 
     <table class="table table-condensed" style="border-collapse:collapse;"> 
      <thead> 
      <tr> 
       <th>&nbsp;</th> 
       <th>Org</th> 
       <th>Description</th> 
       <th>Budget</th> 
       <th>YTD</th> 
       <th>Remaining</th> 
      </tr> 
      </thead> 
      <tbody> 
      <g:each in="${overview}" var="orgs"> 
       <tr data-toggle="collapse" data-target="#${orgs.ORGN}" class="accordion-toggle" style="cursor:pointer"> 
        <td><i class="fa fa-plus-square"></i></td> 
        <td>${orgs.ORGN}</td> 
        <td>${orgs.ORGNTITLE}</td> 
        <td>${orgs.BUDGET}</td> 
        <td>${orgs.YTD}</td> 
        <td>${orgs.REMAINING}</td> 
       </tr> 
       <td colspan="8" class="hiddenRow"> 
        <div class="accordian-body collapse" id="${orgs.ORGN}"> 
         <table class="table table-condensed"> 
         <thead> 
          <tr><th>Account</th> 
           <th>Title</th> 
           <th>Budgeted</th> 
           <th>YTD</th> 
           <th>Remaining</th> 
          </tr> 
          </thead> 
          <tbody> 
          <g:each in="${orgs.expenses}" var="budget"> 
           <tr> 
            <td>${budget.ACCTCODE}</td> 
            <td>${budget.ACCTTITLE}</td> 
            <td>${budget.BUDGETACCEPTED}</td> 
            <td>${budget.YTDACTIVITY}</td> 
            <td>${budget.BUDGETREMAINING}</td> 
           </tr> 
          </g:each> 
          </tbody> 
         </table> 
        </div> 
       </td> 
      </g:each> 
      </tbody> 
     </table> 
</div> 
</div> 

Mon JS est

$('tr').on('shown.bs.collapse', function(){ 
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square"); 
}).on('hidden.bs.collapse', function(){ 
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square"); 
}); 

Merci pour toute aide.

Answer 1

Il semble que vous essayez d'exécuter votre code jQuery avant que le DOM soit entièrement chargé. Je recommande de regarder les différentes façons de le faire dans le jQuery documentation. Typiquement ceci est fait en utilisant $(document).ready().