jquery_ui 菜单 ui 动态子菜单的参数

Question

我正在尝试创建动态子菜单。例如，顶级项目是加载和编辑。每当菜单获得焦点时，都会调用 get JSON 并将结果用于填充要在加载菜单项下加载的可能项。但是，select 事件处理程序的 ui 参数似乎不再对应于单击的项目，调用 ui.item.text() 将取而代之 return 整个文本到子-菜单。

HTML:

...
<ul id="menu">
        <li><div>load</div><ul id="load"></ul></li>
        <li><div>edit</div></li>
</ul>
...

javascript:

var load_populate = function ( json ) {
        var ul = $( "#load" );
        ul.empty();
        for ( let item of json ) {
                ul.append ( $( "<li>" ).append ( $( "<div>" ).text ( item.name ) ) );
        }
};
var menu_focus = function ( event, ui ) {
        $.getJSON ( load_options_url )
                .done ( load_populate );
};
var menu_select = function ( event, ui ) {
        console.log ( ui.item.text() );
};
$( "#menu" ).menu ({
        "focus" : menu_focus,
        "select" : menu_select
});

单击加载子菜单日志中的项目 loaditem1item2item3,等等

刷新菜单无效。

我该怎么做？

Answer 1

这是一个基于您的代码的示例。

例子Fiddle

这使用 POST 只是为了模拟 AJAX activity

https://jsfiddle.net/Twisty/qpky9ht1/53/

HTML

<ul id="menu">
  <li>
    <div>load</div>
    <ul id="load">
    </ul>
  </li>
  <li>
    <div>edit</div>
  </li>
</ul>

JavaScript

已调整为与您的代码更加相似。

$(function() {
  function makeListItem(o, n) {
    $(o).append("<li><div>" + n + "</div></li>");
  }

  $("#menu").menu({
    focus: function(e, ui) {
      console.log("FOCUS", e, ui.item);
      if (ui.item.parent().is("#menu")) {
        $.getJSON (load_options_url,
          function(json) {
            console.log("LOAD");
            $("#load").empty();
            $.each(json, function(i, m) {
              console.log("ITEM", i, m);
              makeListItem("#load", m.name);
            });
            $("#menu").menu("refresh");
          });
      }
    },
    select: function(e, ui) {
      console.log("SELECT", ui.item);
    }
  });
});

这将收集 focus 中的列表数据并附加它们。完成后，将在菜单上执行 refresh 方法。这会将所有新列表项吸收到菜单中。由于 focus 可以在所有菜单项上执行，因此您要确保在关注子菜单项时不会重建菜单。因此 if 声明。

jquery_ui 菜单 ui 动态子菜单的参数

jquery_ui menu ui parameter for dynamic sub-menu

jquery-ui

menu