jquery - jQuery contextMenu 通过 Ajax 调用加载项目

Question

我正在为 jQuery 1.8.11.js 使用下面的上下文菜单插件，并使用“build”回调在每次点击时动态创建菜单。

http://medialize.github.com/jQuery-contextMenu/index.html

我希望能够在单击项目时动态加载菜单选项（调用控制器方法，根据项目的 ID 确定可用选项）

我的问题是这个上下文菜单库似乎不支持 ajax 调用，如果我尝试在“build”回调中进行 ajax 调用，它显然不会等到 ajax 调用完成。

这是我正在尝试做的精简片段：

$.contextMenu({
    selector: '" + contextMenuSelector + @"',
    build: function ($trigger, e) {
    menuOptionsArray = [];
        //Ajax START
        $.ajax({
             type: "POST",
             url: <myurl>,
             //async: false, //**IF I UN-COMMENT THIS, IT WORKS**
             context: $(this),
             success: function (data) {
                   //BUILD THE OPTIONS ARRAY
                   menuOptionsArray...
                }
            });
         //Ajax END

         //This returns before the ajax call finishes               
         return {
            items: menuOptionsArray
        };
    }

在上面，设置 async = false 有效，但由于已弃用，我不想使用它。

有没有其他方法可以异步加载项目，或者这需要修改插件吗？

Answer 1

我有同样的问题，我切换到 jQuery UI 菜单小部件并使用了焦点事件和刷新功能。

这是一个小提琴：http: //jsfiddle.net/3r5FX/

在这里我写了一些关于它的内容：http: //imnotsmartjustlucky.blogspot.se/2013/06/jquery-context-menu-asynchronousajax.html

代码摘录：HTML：

<ul id="menu" style="width:300px">
 <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
 <li>
  <a href="#">Delphi</a>
  <ul>
                 <li><a href="#"><img src="http://cdn-3.nikon-cdn.com/static/images/icons/icon_loading.gif"/></a></li>
  </ul>
 </li>
 <li><a href="#">Saarland</a></li>
 <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>

JS：

$(function(){
    $("#menu").menu({
        focus: function( event, ui ) {
            if(ui.item.children("ul").children("li").children("a").children("img").length > 0){
                $.get("http://fiddle.jshell.net", function(data){
                    ui.item.children("ul").html("<li><a href='#'>Viktor</a></li><li><a href='#'>Sweden</a></li><li><a href='#'>Luleå</a></li>")
                    $("#menu").menu("refresh")
                })
            }
        }
    });

});