How to handle jQuery UI Selectmenu change event

Question

i use jquery ui select menu with custom render option

how i can handle the change event ?

i try

   $('#filesA').on('change', function() {   alert( 'x');  }); 

but its not working with jQuery UI Selectmenu

and also i try

$( "#filesA" ).selectmenu({   change: function( event, ui ) {} }); 

it's working but it's create another select menu instance !!

my js code

$( document ).ready(function() {    $( "#filesA" ).selectmenu({ change: function( event, ui ) { alert('x'); }});    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {                             _renderItem: function( ul, item ) {                                 var li = $( "<li>", { text: item.label } );                                  if ( item.disabled ) {                                     li.addClass( "ui-state-disabled" );                                 }                                  $( "<span>", {                                     style: item.element.attr( "data-style" ),                                     "class": "ui-icon " + item.element.attr( "data-class" )                                 })                                 .appendTo( li );                                  return li.appendTo( ul );                             }                         });                          $( "#filesA" )                         .iconselectmenu()                         .iconselectmenu( "menuWidget" )                         .addClass( "ui-menu-icons" );     }); 

and my html code

                <label class="langLabel" for="filesA">Select your language:</label>                 <select name="filesA" id="filesA">                     <option value="lan1">Test Lang1</option>                     <option value="lan2">Test Lang2</option>                     <option value="lan3">Test Lang3</option>                     <option value="lan4">Test Lang4</option>                     <option value="lan5">Test Lang5</option>                  </select> 

Answer 1

just change the trigger 'change' to 'selectmenuchange'

$('#filesA').on('selectmenuchange', function() {     alert( 'x');  }); 

Answer 2

Take a look here: http://jsfiddle.net/JLVSM/

Just change your code to:

$( "#filesA" ).selectmenu({ change: function( event, ui ) { alert('x'); }});  $.widget( "custom.iconselectmenu", $.ui.selectmenu, {     _renderItem: function( ul, item ) {         var li = $( "<li>", { text: item.label } );          if ( item.disabled ) {             li.addClass( "ui-state-disabled" );         }          $( "<span>", {             style: item.element.attr( "data-style" ),             "class": "ui-icon " + item.element.attr( "data-class" )         })         .appendTo( li );          return li.appendTo( ul );     }, });  $( "#filesA" ).addClass( "ui-menu-icons" );