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

Question

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

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

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

小提琴示例

这使用 POST 只是为了模拟 AJAX 活动

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 声明。