JQuery UI Selectmenu events bind

Question

Im using the jQuery UI Selectmenu widget - http://wiki.jqueryui.com/w/page/12138056/Selectmenu

I am trying to bind a change event. But this does not work:

$(function() { $('select#items').selectmenu(); $('select#items').bind("change",function(){ alert('x'); }); }); 

Any ideas?

Answer 1

I have found the answer. So here it is:

 $(function() { $('#items').selectmenu({ change: function() { alert('x'); } }); }); 

Answer 2

Since this first appeared on Google and did not give me the answer I was looking for, looking at the jquery ui code, this can be done after the initial setup of the selection menu, binding to the selectmenuchange event, as shown below. Worked for me anyway.

 $('#items').selectmenu(); $('#items').on('selectmenuchange',function() { alert("hello world"); }); 

Answer 3

I just pulled out my hair and figured out how to do it. Basically you have to tell selectmenu to trigger a change event.

When you configure your selectmenu, use the close method, for example:

 //Set select box to jQuery UI selectmenu $('select').selectmenu({ close: function(event, ui){ //Fire change event $(this).change(); } }); 

Then define your change event as follows:

 $('#container').on('change', 'select', function(e){ alert('x'); });