Jquery插件 - 事件未正确触发

Question

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

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

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

插入代码

$.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));

在

中传递的JSON对象

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"
                        }];

Answer 1

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

在循环中，当您说var menuItem = $("#" + value.MenuId);时，您已将html（字符串）添加到变量menu但是它尚未添加到dom中，因此选择器"#" + value.MenuId将不返回任何元素，因此点击处理程序不会添加到目标元素。

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

＆＃13;

＆＃13;

(function($) {
  $.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>";
      });
      menu += "</ul></div>";

      var $html = $(menu);

      $html.find('a').click(function() {
        alert('test');
      });

      return $(this).html($html);
    }

  };

})(jQuery);

jQuery(function($) {
  var testMethod = {};
  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"
  }];

  $('#ct').rioContextMenu({
    data: menuData
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ct"></div>

＆＃13;

＆＃13;

＆＃13;