javascript - jQuery UI 选择菜单 : Why is "select" event not triggered?

Question

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

我知道这可以通过运行 $("#myselect").on("selectmenuselect") 但为什么它不起作用 as suggested by the 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>

祝你有美好的一天!