jsTree contextmenu issue

This should be a really simple question, but I can't seem to find the answer anywhere. I've recently (like today) began using jsTree and I just got my first tree set up. I created an unordered list of just static text:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

My code to do a jsTree looks like this:

$(document).ready(function () {
        $("#demo1").bind("select_node.jstree",
                function(event, data) {
                    //DO SOMETHING WHEN A NODE IS CLICKED
                }).jstree();
});

Then I try to add a context menu. Using the following:

$(document).ready(function () {
        $("#demo1").bind("select_node.jstree",
                function(event, data) {
                    //DO SOMETHING WHEN A NODE IS CLICKED
                }).jstree({plugins: ["contextmenu"], contextmenu: {items: customMenu}});
    });

customMenu is a simple function that returns an object.

When I execute the first code, I get my jsTree and it collapses and expands. When I execute the second one, the area where the jsTree is says "Loading..." and that is all. If I right-click that word, I DO get t开发者_运维知识库he menu.

Any suggestions?

if, when I point it to the function customMenu, I add the (), then I get a really strange menu that has: -create -rename -delete -edit --cut --copy --paste --Add Group --delete

I'm not sure I know what's going on. I changed the function name to something different to be sure I wasn't getting a jQuery or jsTree function, but I still get the strange behavior. Any suggestions?

it would be suggested not to handle the contextmenu creation yourself, but rather let jstree do that for you.

so in the initialization code you would write:

$("#demo1").jstree(
{ 
    "plugins" : [ "contextmenu" ]
}

and that would be sufficient to have a functional contextmenu.

dont bind the on select method to jstree. Instead create your new menu items as in the code below. This should work fine.

$("#demo1").jstree(
{ 
     "contextmenu":{
         items:{
              "LogicalNameForMenuItem":{
                     label: "DisplayNameForMenuItem",
                     action: function (node) {
                          <--Your code to handle the function goes here-->
                     } 
               }
          }
      },

      "plugins" : [ "contextmenu","crrm","ui" ]

});

This should work.

And if you want to remove the default menu items then set them to false

"contextmenu":{
         items:{
            create:false,
            remove:false,
            ccp:false
         }
}