Jquery Plugin - Events not firing correctly

Question

I'm trying to create a simple jquery menu plugin which will popup once a user clicks on a button.

What i want to achieve is to pass in a data (JSON) object to the plug in, This object will have the Menu text and the corresponding command that should be fired and also the arguments that should be passed to the command which lies in a separate JS file.

The basic problem that i'm now facing is that , I cant get the menu items to fire the click event which is bind. It would be great if someone could point me in the right direction.

Plug in Code

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

The JSON object which is passed in

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

You can use the id-selector in the document context only after the html content is added to the dom.

In your loop, when you say var menuItem = $("#" + value.MenuId);, you have added the html(string) to the variable menu but it is not yet added to the dom so the selector "#" + value.MenuId will not return any element thus the click handler is not added to the target element.

One option here is to first add the content to the dom, then add the click handler like

(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
  })
})

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