如何处理jQuery UI Selectmenu更改事件

我使用jquery ui选择菜单和自定义渲染选项

我怎么能处理change事件？

我试试

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

但它不适用于jQuery UI Selectmenu

我也试试

 $( "#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 = $( "
", { text: item.label } ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ); } $( "", { 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" ); }); 

和我的HTML代码

  Select your language:  Test Lang1 Test Lang2 Test Lang3 Test Lang4 Test Lang5  

Answer 1

只需将触发'change'为'selectmenuchange'

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

Answer 2

看看这里： http ： //jsfiddle.net/JLVSM/

只需将您的代码更改为：

 $( "#filesA" ).selectmenu({ change: function( event, ui ) { alert('x'); }}); $.widget( "custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function( ul, item ) { var li = $( "
", { text: item.label } ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ); } $( "", { 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" ); 

Answer 3

或者更具体地……

 $(function() { $.widget( "custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function( ul, item ) { var li = $( "
", { text: item.label } ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ); } $( "", { 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'); } }); }); 

Answer 4

我这样解决了：

 $.widget( "custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function( ul, item ) { var li = $( "
", { text: item.label } ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ); } $( "", { 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" ); 

Answer 5

我有同样的问题。 最终用iconselectmenu而不是selectmenu克服了它

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