Jquery UI 以编程方式触发更改事件？

Question

我正在使用 jquery UI 并在 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");

});

单击选择选项 2 按钮时，下拉列表中的值会发生变化，但不会触发 change 事件。请帮助我。

Answer 1

这是一个解决方法。

你可以绑定(bind)selectmenuchange事件然后你可以使用.trigger()

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

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

DEMO