Javascript Jquery插件-事件未正确触发

我正在尝试创建一个简单的jquery菜单插件，一旦用户单击按钮，它就会弹出

我想要实现的是将一个数据（JSON）对象传递给插件，这个对象将具有菜单文本和应激发的相应命令，以及应传递给位于单独JS文件中的命令的参数

我现在面临的基本问题是，我无法让菜单项触发绑定的单击事件。如果有人能给我指出正确的方向那就太好了

插件代码

---

只有在将html内容添加到dom之后，才能在文档上下文中使用id选择器

在循环中，当您说

var menuItem=$（“#”+value.MenuId）时

，您已将html（字符串）添加到变量

菜单

，但它尚未添加到dom中，因此选择器

“#”+值。MenuId

不会返回任何元素，因此单击处理程序不会添加到目标元素

这里的一个选项是首先将内容添加到dom中，然后添加单击处理程序，如

（函数（$）{
$.fn.rioContextMenu=函数（选项）{
var opts=$.extend（{}，$.fn.rioContextMenu.defaults，options）；
var menu=“
”；
如果（opts.data！=null）{
$.each（选择数据、函数（键、值）{
菜单+=“
”+value.MenuText+“
”；
});
菜单+=“
”；
var$html=$（菜单）；
$html.find（'a'）。单击（函数（）{
警报（“测试”）；
});
返回$（this.html（$html）；
}
};
})（jQuery）；
jQuery（函数（$）{
var testMethod={}；
变量menuData=[{
MenuText:“编辑文档”，
MenuCmd:testMethod，
MenuId:“编辑文档项”
}, {
MenuText:“输入错误”，
MenuCmd:testMethod，
MenuId:“errorItem”
}, {
菜单文本：“锁定/解锁”，
MenuCmd:testMethod，
MenuId:“锁项”
}, {
MenuText:“历史”，
MenuCmd:testMethod，
MenuId:“历史项目”
}, {
MenuText:“打印”，
MenuCmd:testMethod，
MenuId:“打印项”
}];
$（'#ct'）。rioContextMenu({
数据：menuData
})
})

---

只有在将html内容添加到dom后，才能在文档上下文中使用id选择器

在循环中，当您说

var menuItem=$（“#”+value.MenuId）时

，您已将html（字符串）添加到变量

菜单

，但它尚未添加到dom中，因此选择器

“#”+值。MenuId

不会返回任何元素，因此单击处理程序不会添加到目标元素

这里的一个选项是首先将内容添加到dom中，然后添加单击处理程序，如

（函数（$）{
$.fn.rioContextMenu=函数（选项）{
var opts=$.extend（{}，$.fn.rioContextMenu.defaults，options）；
var menu=“
”；
如果（opts.data！=null）{
$.each（选择数据、函数（键、值）{
菜单+=“
”+value.MenuText+“
”；
});
菜单+=“
”；
var$html=$（菜单）；
$html.find（'a'）。单击（函数（）{
警报（“测试”）；
});
返回$（this.html（$html）；
}
};
})（jQuery）；
jQuery（函数（$）{
var testMethod={}；
变量menuData=[{
MenuText:“编辑文档”，
MenuCmd:testMethod，
MenuId:“编辑文档项”
}, {
MenuText:“输入错误”，
MenuCmd:testMethod，
MenuId:“errorItem”
}, {
菜单文本：“锁定/解锁”，
MenuCmd:testMethod，
MenuId:“锁项”
}, {
MenuText:“历史”，
MenuCmd:testMethod，
MenuId:“历史项目”
}, {
MenuText:“打印”，
MenuCmd:testMethod，
MenuId:“打印项”
}];
$（'#ct'）。rioContextMenu({
数据：menuData
})
})

也尝试过。在这里，它没有帮助，因为我们；；也试过了。在这里，它没有帮助，因为我们；；

$.fn.rioContextMenu = function (options) {
    var opts = $.extend( {}, $.fn.rioContextMenu.defaults, options );
    var menu = "<div class='btn-group'><button class='btn dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-edit'></span></button><ul class='dropdown-menu'>";

    if (opts.data != null) {
                $.each(opts.data, function(key, value) {
                menu += "<li><a id='"+value.MenuId+ "'>" + value.MenuText + "</a></li>";
                   var menuItem = $("#" + value.MenuId);

                   menuItem.bind('click', function() {
                        alert('test');
                    });​
                });
        menu += "</ul></div>";
        return $(this).html(menu);
}

}(jQuery));

var menuData = [{
                            MenuText : 'Edit Document', 
                            MenuCmd: testMethod,
                            MenuId: "editDocumentItem"
                        },
                        {
                            MenuText: "Entered in error",
                            MenuCmd: testMethod,
                            MenuId: "errorItem"
                        },
                        {
                            MenuText: "Lock/Unlock",
                            MenuCmd: testMethod,
                            MenuId: "lockItem"
                        },
                        {
                            MenuText: "History",
                            MenuCmd: testMethod,
                            MenuId: "historyItem"
                        },
                        {
                            MenuText : "Print", 
                            MenuCmd: testMethod,
                            MenuId: "printItem"
                        }];