Jquery UI fire change event programmatically?

Question

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

});

On click of select option 2 button, value is changing in the drop down but change event is not fired. Please help me.

Answer 1

Its a work around.

You can bind selectmenuchange event then you can use .trigger()

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

$('#filesA').val('2')
    .selectmenu("refresh")
    .trigger("selectmenuchange");

DEMO