为什么未触发 selected:ready-event ？

Question

我试图在创建后隐藏选择的控件。所以我在chosen:ready 上设置了一些代码来隐藏容器。但似乎没有触发该事件。

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

我错过了什么？

Answer 1

我之前遇到过同样的问题，并认为您需要在实例化 selected 之前进行绑定。请尝试以下操作：

$(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>

注意：我在您的代码中注意到的另一件事是您试图写入选定的值。为此，您需要进行更改：

$(this).text()

到

$(this).val()

Answer 2

您的代码必须以适当的方式排列。jQuery 是自上而下的方法。 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);
          });

        });`