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

如何解决动态子菜单的 jquery_ui 菜单 ui 参数

我正在尝试创建一个动态子菜单。例如，顶级项目是加载和编辑。每当菜单聚焦时，就会调用 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 等

刷新菜单无效。

我该怎么做？

解决方法

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

小提琴示例

这里使用 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 中的列表数据并附加它们。完成此操作后，将在 Menu 上执行 refresh 方法。这会将所有新列表项同化到菜单中。由于 focus 可以对所有菜单项执行，因此您要确保在关注子菜单项时不会重建菜单。因此，if 语句。