catching click in menubuttons

[jpierce]

How are you supposed to catch clicks on menubutton items?  Are you supposed to manually bind handlers to each of the individual menu items?  I was hoping to just bind one at the menubutton level (this is for a list of new tabs, so when you click on one it creates a tab for it).

[stworthy]

When click on a menubutton item, the 'onClick' event fires, in which you will be able to catch what item is clicked.

Code:

	<a href="#" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-help'">Help</a>
	<div id="mm" style="width:100px;" data-options="
				onClick:function(item){
					alert(item.name);
				}
			">
		<div data-options="name:'help'">Help</div>
		<div data-options="name:'update'">Update</div>
		<div data-options="name:'about'">About</div>
	</div>

[jpierce]

Ah, okay.  The onClick has to be set on the div following the anchor element.  That wasn't shown at all in the help/demo and wasn't obvious to me.  Thanks for the tip.

Also, is there any way it can be set after the fact using javascript?  I tried the following but it appeared to never hook any click events:

Code:

$('.easyui-menubutton').menubutton({
  onClick:function(item){
    alert(item.name);
  }
});

[stworthy]

Try the code:

Code:

var m = $('#mb').menubutton('options').menu;  // get the menu
$(m).menu({
	onClick:function(item){
		alert(item.name)
	}
});

[jpierce]

Okay, thanks!

Would be great for some of this to be added to the docs when there's some time.