JQuery UI event change event programmatically?

I am using jquery UI and the jsfiddle created below .

$( "#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 by value - select "option 2"
$('#btn').click(function (){
    $('#filesA').val('2');
    $('#filesA').selectmenu("refresh");
        $('#filesA').selectmenu("change");

});

      

        
        
        
      

    

When the button is clicked, the select option 2

value changes in the dropdown list but change

does not start. Please help me.