J'ai des problèmes avec jQuery find

Question

J'ai actuellement un formulaire qui attache une classe à une étiquette d'entrée lorsqu'une option a été sélectionnée. Je l'ai fait fonctionner magnifiquement avant d'utiliser le plugin iCheck. Je parcours essentiellement une série de parents afin de trouver la classe '.frmLabel' et d'y ajouter une classe de '.frmLabelChecked'. Cela fonctionne pour mes entrées de sélection et de texte, mais cela ne fonctionne pas pour la radio et les boutons de vérification. D'après ce que je peux voir le plugin iCheck ajouter un élément div supplémentaire pour le style de formulaire il semble donc que l'ajout d'un parent supplémentaire() permettrait de résoudre le problème. C'est un peu brouillon mais c'est le mieux que je puisse faire puisque le widget que j'utilise est activé de manière dynamique.

exemples vivants peuvent être trouvés ici: http://bvp.dmediastudios.com et la version sans icheck (qui fonctionne) est ici http://bvp.dmediastudios.com/v4/

Le code est le suivant:

$('.frmInput input[type=radio]').click(function() { 

    // buy or lease options, have to seperate functions for each option since the html structure is different for each one so a all size fits solution using parent() is not possible (that I know of) - very lame. BETTER DONE THAN PERFECT! 

    if ($('.frmInput input[type=radio]').is(':checked')) { 

     // parent(1) = #harwidget, parent(2) = #homefinderform, parent(3) .frmRow - find .frmLabel 
     $(this).parent().parent().parent().parent().find('.frmLabel').addClass('frmLabelChecked'); 

    } 

}); 

Le code case

$('#divBuyType').on('click', 'input:checkbox', function() { 
    $(this).parent().parent().parent().parent().find('.frmLabel').toggleClass('frmLabelChecked', this.checked); 
}); 

La version non-travail peut être trouvé ici: bvp.dmediastudios.com, la version de travail (sans iCheck) peut être trouvé ici: bvp.dmediastudios.com/v4/

Voici le bloc de HTML que la fonction ci-dessus fait référence à

<div id="mywidget3A0A581997704AA41EB19FFEC804E593" style="text-align:left;"> 
<div style="width:450px;height:520px;" id="widgetOuter"> 
    <div id="widgetContainer"> 
     <div class="widgetHeader" style="display: none;"> 
      <div class="widgetRight"> 
       <div class="widgetMidd"> 
        <div class="widgetTitle">Home Finder</div> 
        <div class="widgetBackBtn" id="hartab3A0A581997704AA41EB19FFEC804E593" style="display:none;"> 
         <img src="" onclick="showSearch('3A0A581997704AA41EB19FFEC804E593')" style="cursor:pointer;"> 
        </div> 
        <div class="titleBar" id="titleBar3A0A581997704AA41EB19FFEC804E593"></div> 
       </div> 
      </div> 
     </div> 
     <div class="widgetBody"> 
      <span id="widgetBodyDiv" style="height:438px;" onscroll="fixTip('3A0A581997704AA41EB19FFEC804E593');"> 
       <div id="harwidget3A0A581997704AA41EB19FFEC804E593" style="padding: 10px; display: block;"> 
        <form name="homefinderform" method="get" class="forms" id="homefinderform"> 
         <div class="frmRow"> 
          <div class="frmLabel">Buy or Lease :</div> 
          <div class="frmInput"> 
           <span> 
            <div class="iradio_minimal-grey checked" style="position: relative;"> 
             <input type="radio" name="For_Sale" value="1" checked="" onclick="showBuyDiv(this)" class="radioButton" style="position: absolute; opacity: 0;"> 
             <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
            </div>Buy</span> 
           <span>-</span> 
           <span> 
            <div class="iradio_minimal-grey" style="position: relative;"> 
             <input type="radio" name="For_Sale" value="0" onclick="showLeaseDiv(this)" class="radioButton" style="position: absolute; opacity: 0;"> 
             <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
            </div>Lease</span> 
          </div> 
         </div> 
         <div class="frmRow"> 
          <div class="frmLabel">Property Type</div> 
          <div class="frmInput"> 
           <div id="divBuyType"> 
            <span> 
             <div class="icheckbox_minimal-grey checked" style="position: relative;"> 
              <input name="PROPERTY_CLASS_ID" value="1" type="checkbox" style="width: 20px; position: absolute; opacity: 0;" checked=""> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Single Family Homes 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROPERTY_CLASS_ID" value="2" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Townhouse/Condo 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROPERTY_CLASS_ID" value="6" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Highrise Condominium 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROPERTY_CLASS_ID" value="3" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Residential Lots &amp; Land 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROPERTY_CLASS_ID" value="4" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Multi-Family 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROPERTY_CLASS_ID" value="5" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Homes and/or Acreage</span> 
           </div> 
           <div id="divLeaseType" style="display:none;"> 
            <span> 
             <div class="icheckbox_minimal-grey checked" style="position: relative;"> 
              <input name="PROP_TYPE" value="'SGL'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;" checked=""> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Single Family Homes 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROP_TYPE" value="'THC'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Townhouse/Condo 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROP_TYPE" value="'HIR'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Highrise Condominium 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROP_TYPE" value="'LOT'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Residential Lots &amp; Land 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROP_TYPE" value="'MLT'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Multi-Family 
             <div class="br"> 
              <br> 
             </div> 
             <div class="icheckbox_minimal-grey" style="position: relative;"> 
              <input name="PROP_TYPE" value="'ACR'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;"> 
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins> 
             </div>Homes and/or Acreage 
             <div class="br"> 
              <br> 
             </div> 
            </span> 
           </div> 
          </div> 
         </div> 
         <!--Start Select Fields--> 

Toute aide serait appréciée. Il pourrait être plus facile d'afficher le code HTML sur la page elle-même.

Answer 1

Si quelqu'un d'autre utilise ce plugin et doit déclencher un certain type d'événement en utilisant une radio ou une case à cocher, utilisez ceci.

$('input').on('ifChecked', function(event){ 
    alert(event.type + ' callback'); 
}); 

La documentation se trouve ici. https://github.com/fronteed/iCheck