jquery-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
并附加它们。完成此操作后,refresh
将在菜单上执行方法。这会将所有新列表项同化到菜单中。由于focus
可以在所有菜单项上执行,因此您要确保在专注于子菜单项时不会重新构建菜单。因此if
声明。
推荐阅读
- c# - Asp.NET MVC 5 更新导航属性
- uml - UML 状态机 - 具有条目活动的复合状态中的显式条目
- python - 从按钮功能创建的对象中检索值的问题
- javascript - 在 npm 或 webpack 中分离开发和生产文件
- python-3.x - 排序一个zip对象后,为什么列出对象为空
- random-forest - 随机森林库 zip 文件
- azure - MSAL无法在Angular 6中获取令牌时如何将浏览器重新路由到自定义“用户不在角色”页面
- vba - 宏编码,如何自动将文档重命名为上述文件夹名称
- fullcalendar - 我可以控制在全日历中即时显示多少事件吗?
- php - PHP 致命错误:未捕获错误:调用未定义函数 as_next_scheduled_action()