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

时间:2016-06-15 16:14:38

标签: jquery hide jquery-chosen

我试图在创建后隐藏一个选择控件。所以我在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");}); 
});

我错过了什么?

2 个答案:

答案 0 :(得分:5)

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

&#13;
&#13;
$(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();

});
&#13;
<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>
&#13;
&#13;
&#13;

注意:我在代码中注意到的另一件事是你试图写入选定的值。要实现这一目标,您需要更改:

$(this).text 

$(this).val().

答案 1 :(得分:3)

您的代码必须以适当的方式排列.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);
          });

        });`