EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jpierce on May 13, 2013, 02:02:07 PM

Title: catching click in menubuttons
Post by: jpierce on May 13, 2013, 02:02:07 PM

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

Title: Re: catching click in menubuttons
Post by: stworthy on May 14, 2013, 12:35:30 AM

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>

Title: Re: catching click in menubuttons
Post by: jpierce on May 14, 2013, 10:24:02 AM

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

Title: Re: catching click in menubuttons
Post by: stworthy on May 14, 2013, 10:48:36 AM

Try the code:

Code:

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

Title: Re: catching click in menubuttons
Post by: jpierce on May 14, 2013, 10:50:06 AM

Okay, thanks!

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