JQuery UI Menu动态子菜单select事件ui参数异常问题求助

我来帮你分析下问题出在哪，以及怎么修复：

问题根源 #

1. focus事件触发过于频繁：你当前的menu_focus会在菜单的任何元素（包括子菜单项）获得焦点时都执行，导致每次操作都重新清空并重建子菜单，这会干扰jQuery UI菜单的内部状态，使得点击时ui.item指向的是整个子菜单容器而非单个项。
2. 动态修改DOM后未刷新菜单组件：jQuery UI菜单是基于DOM结构初始化的，当你动态添加/删除子菜单项后，必须调用menu("refresh")来让组件识别新的DOM结构，否则事件绑定会出错。

修复后的代码 #

var load_populate = function (json) {
    var ul = $("#load");
    ul.empty();
    for (let item of json) {
        ul.append($("<li>").append($("<div>").text(item.name)));
    }
    // 关键：动态修改后刷新菜单组件
    $("#menu").menu("refresh");
};

var menu_focus = function (event, ui) {
    // 仅当顶级的load菜单项获得焦点时才加载子菜单
    if (ui.item.children("#load").length > 0) {
        // 可选：判断子菜单是否已有内容，避免重复请求
        if ($("#load").children().length === 0) {
            $.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
});

关键修改说明 #

• 限制focus触发加载的时机：通过ui.item.children("#load").length判断当前焦点是否在顶级的load项上，只有第一次点击/聚焦到load时才会加载子菜单，避免频繁重建DOM。
• 添加菜单刷新操作：在load_populate的最后调用$("#menu").menu("refresh")，让jQuery UI菜单重新解析DOM结构，这样新添加的子菜单项就能被正确识别，select事件的ui.item也会指向被点击的单个项。
• 可选的重复请求防护：判断子菜单是否已有内容，避免每次聚焦load都发起请求，优化性能。

这样修改后，你点击load子菜单里的单个项时，控制台就会正确输出对应项的文本了。

内容的提问来源于stack exchange，提问作者zjmarlow