Why is the chosen:ready-event not triggered?

I am trying to hide a chosen-control after creation. So I have set some code on chosen:ready to hide the container. But it seems that event is not triggered.

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");}); 
});

What am I missing?

Solution

I came across this same problem before and figured that you need to bind before instantiating chosen. Try the following:

$(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">
                                                            <option disabled="disabled" selected="selected">[Select]</option>
                              <option>ChoiceA</option>
                              <option>ChoiceB</option>
                                                        </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: Another thing I noticed in your code was that you were trying to write the selected value. For that to work, you need to change:

$(this).text()

$(this).val()