jQuery UI 选择菜单：为什么"select"事件没有触发？

Question

我在项目中遇到了这个问题，所以我在小提琴上尝试了这个。我正在尝试动态触发选择菜单的选择。为什么我在 selectmenu 初始化中定义的 select 事件仅在我执行手动选择后触发？

我知道这可以通过运行$("#myselect").on("selectmenuselect")来实现，但为什么它不能按照 API 的建议工作？

$(function () {
   $("#myselect").selectmenu({
       select: function () {
           alert("ok");
       }
   });
   setTimeout(function () {
       $("#myselect").val("option4");
       $("#myselect").selectmenu("refresh");
       $("#myselect").trigger("selectmenuselect");
    }, 1000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<select id="myselect">
  <option value="option1" selected>option 1</option>
  <option value="option2">option 2</option>
  <option value="option3">option 3</option>
  <option value="option4">option 4</option>
</select>

Answer 1

这样的事情应该可以解决问题：

$(function () {      
  
    $("#myselect").selectmenu().on("selectmenuselect", function (event, ui) {
         console.log(ui);
    });
  
   setTimeout(function () {
       $("#myselect").val("option4");
       $("#myselect").selectmenu("refresh");
       $("#myselect").trigger("selectmenuselect",$("#myselect"));
    }, 1000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<select id="myselect">
  <option value="option1" selected>option 1</option>
  <option value="option2">option 2</option>
  <option value="option3">option 3</option>
  <option value="option4">option 4</option>
</select>

祝你今天开心！