为什么选择:未触发就绪事件？

Question

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

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

我错过了什么？

Answer 1

之前我遇到过同样的问题,并且发现在实例化选择之前你需要绑定.请尝试以下方法:

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