如何处理jQuery UI Selectmenu更改事件

我使用jQueryUI选择菜单

我如何处理

更改
事件？

我试着

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

但它不适用于jQueryUISelectMenu

我也试着

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

它正在工作，但它正在创建另一个选择菜单实例


我的js代码

$( 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" );




});

$（文档）.ready（函数（）{
$（“#filesA”）。选择菜单（{change:function（event，ui）{alert（'x'）；}}）；
$.widget（“custom.iconselectmenu”，$.ui.selectmenu{
_renderItem：功能（ul，项目）{
var li=$（“
”，{text:item.label}）；
如果（项已禁用）{
li.addClass（“ui状态禁用”）；
}
$( "", {
样式：item.element.attr（“数据样式”），
“类”：“ui图标”+item.element.attr（“数据类”）
})
.附件（李）；
返回li.附录（ul）；
}
});
$（“#文件A”）
.iconselectmenu（）
.iconselectmenu（“菜单Widget”）
.addClass（“ui菜单图标”）；
});

还有我的html代码

                <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>

选择您的语言：
测试语言1
测试语言2
测试语言3
测试语言4
测试语言5
看看这里：

只需将代码更改为：

$( "#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" );

$（“#filesA”）。选择菜单（{change:function（event，ui）{alert（'x'）；}）；
$.widget（“custom.iconselectmenu”，$.ui.selectmenu{
_renderItem：功能（ul，项目）{
var li=$（“
”，{text:item.label}）；
如果（项已禁用）{
li.addClass（“ui状态禁用”）；
}
$( "", {
样式：item.element.attr（“数据样式”），
“类”：“ui图标”+item.element.attr（“数据类”）
})
.附件（李）；
返回li.附录（ul）；
},
});
$（“#filesA”）.addClass（“ui菜单图标”）；
我也有同样的问题。最终用iconselectmenu而不是selectmenu解决了这个问题

$( "#filesA" ).iconselectmenu({ change: function( event, ui ) { alert('x'); }});

或者更具体地说

$(function() {
$.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 );
}
});

$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );

$('#filesB').iconselectmenu({
    change: function( event, ui) {
    alert('something has changed');
    }
});
});

$（函数（）{
$.widget（“custom.iconselectmenu”，$.ui.selectmenu{
_renderItem：功能（ul，项目）{
var li=$（“
”，{text:item.label}）；
如果（项已禁用）{
li.addClass（“ui状态禁用”）；
}
$( "", {
样式：item.element.attr（“数据样式”），
“类”：“ui图标”+item.element.attr（“数据类”）
})
.附件（李）；
返回li.附录（ul）；
}
});
$（“#文件B”）
.iconselectmenu（）
.iconselectmenu（“菜单Widget”）
.addClass（“ui菜单图标自定义图标”）；
$（'#filesB'）。i选择菜单({
更改：功能（事件、用户界面）{
警惕（‘有些事情改变了’）；
}
});
});
只需将触发器“更改”更改为“选择菜单更改”

$('#filesA').on('selectmenuchange', function() {
    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({ change: function( event, ui ) { alert("Hi"); s}}).iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons" );

$.widget（“自定义.iconselectmenu”，$.ui.selectmenu{
_renderItem：功能（ul，项目）{
var li=$（“
”，{text:item.label}）；
如果（项已禁用）{
li.addClass（“ui状态禁用”）；
}
$( "", {
样式：item.element.attr（“数据样式”），
“类”：“ui图标”+item.element.attr（“数据类”）
})
.附件（李）；
返回li.附录（ul）；
},});      
$（“#filesA”）.iconselectmenu（{change:function（event，ui）{alert（“Hi”）；s}}）.iconselectmenu（“menuWidget”）.addClass（“ui菜单图标”）；
你说它创建了另一个实例是什么意思？在JSfiddle中显示它也许…谢谢@j809并删除`change:function（event，ui）{alert（“Changed”）；}，`它不工作请解释你的答案修复了什么。转储代码块并不总是一个好主意。有什么区别？