jQuery UI Selectmenu events bind

Question

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

Im trying to bind change event. But it does not work:

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

Any ideas ?

Answer 1

I found an answer. So here it is:

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

Answer 2

Since this came up first on Google and didn't give me the answer I was looking for, having looked at the jquery ui code it can be done after initially setting up the select menu, binding to the selectmenuchange event as below. Worked for me anyway.

$('#items').selectmenu();

$('#items').on('selectmenuchange',function() {

    alert("hello world");

});

Answer 3

I was just pulling my hair out about this and figured out a easy way of doing it. You basically have to tell the selectmenu to trigger the change event.

When you setup your selectmenu use the close method like so:

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

Then define your change event like this:

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