Jak obsługiwać jQuery UI Selectmenu zdarzenia zmiany

Question

używam jQuery UI wybierz menu z custom render option

jak mogę obsłużyć zdarzenia change?

próbuję

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

ale jej nie pracuje z jQuery UI Selectmenu

a także staram

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

to działa, ale to utworzyć inną instancję wybierz menu !!

mój kod 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"); 




}); 

i mój kod 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> 

Answer 1

wystarczy zmienić spust 'change' do 'selectmenuchange'

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

Answer 2

Spójrz tutaj: http://jsfiddle.net/JLVSM/

Wystarczy zmienić swój kod do:

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

Answer 3

Miałem ten sam problem. Pokonał go ostatecznie z iconselectmenu zamiast selectmenu

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

Answer 4

a dokładniej ...

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

Answer 5

I rozwiązać w ten sposób:

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