Pourquoi l'élément choisi est-il: l'événement prêt n'est pas déclenché?

Question

J'essaie de cacher un contrôle choisi après la création. J'ai donc mis du code sur chosen:ready pour cacher le conteneur. Mais il semble que l'événement n'est pas déclenché.

Repro: codepen

HTML:

<div style="width:200px;" id="MCchsn_id711552766_2"> 
    <select id="id711552766_2" style="width:100%" name="id711552766_2"> 
     <option disabled="disabled" selected="selected">[Select]</option> 
     <option>ChoiceA</option> 
     <option>ChoiceB</option> 
    </select> 
</div> 

JS:

$(function() { 
    $("#id711552766_2").chosen(); 
    $("#id711552766_2").on("update",function() { console.log($(this).text);}); 
    $("#id711552766_2").on("chosen:ready",function() {$("#MCchsn_id711552766_2").hide();alert("hidden");}); 
}); 

Qu'est-ce que je manque?

Answer 1

Je suis tombé sur ce même problème avant et pensé que vous devez lier avant l'instanciation choisi. Effectuez les opérations suivantes:

$(function() { 
 

 
    $("#id711552766_2").on("change", function() { 
 
    console.log($(this).val()); 
 
    }); 
 

 
    $("#id711552766_2").on("chosen:ready", function() { 
 
    $("#MCchsn_id711552766_2").hide(); 
 
    alert("hidden"); 
 
    }); 
 

 
    $("#id711552766_2").chosen(); 
 

 
});

<div style="width:200px;" id="MCchsn_id711552766_2"> 
 
    <select id="id711552766_2" style="width:100%" name="id711552766_2"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <option disabled="disabled" selected="selected">[Select]</option> 
 
           <option>ChoiceA</option> 
 
           <option>ChoiceB</option> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </select> 
 

 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.js"></script>

Note: Une autre chose que j'ai remarqué dans votre code est que vous essayez d'écrire la valeur sélectionnée. Pour que cela fonctionne, vous devez changer:

$(this).text 

à

$(this).val(). 

Answer 2

votre code doit être organisé de manière appropriée.jQuery est approche descendante. Check Code Here

$(function() { 

      $("#id711552766_2").on("chosen:ready" , function() { 
       $("#MCchsn_id711552766_2").css('display','none'); 
       alert("hidden"); 
      }); 

      $("#id711552766_2").chosen();$("#id711552766_2").on("update",function() {   
console.log($(this).text); 
      }); 

     });`