html - Jquery UI fire change event programmatically? -

i using jquery ui , created below jsfiddle.

$( "#filesa" ).selectmenu({ change: function( event, ui ) { alert('x'); }});  $.widget( "custom.iconselectmenu", $.ui.selectmenu, {     change: function(event,ui){         alert("changed");     },     _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" );  // set option value - select "option 2" $('#btn').click(function (){     $('#filesa').val('2');     $('#filesa').selectmenu("refresh");         $('#filesa').selectmenu("change");  }); 

on click of select option 2 button, value changing in drop down change event not fired. please me.

its work around.

you can bind selectmenuchange event can use .trigger()

$("#filesa")     .selectmenu()     .on("selectmenuchange", function (event, ui) {         alert('x');     });  $('#filesa').val('2')     .selectmenu("refresh")     .trigger("selectmenuchange"); 

demo