SelectMenu Change Event ne marche pas

Bonjour,

J'ai une liste avec image. L’événement Change fonctionne quand je l'utilise dans le constructeur jquery :

Citation:

change :...

Je voudrais externaliser la capture de l'évènement pour centraliser les actions d'envois au serveur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 $(function () {
        $.widget("custom.TFOiconSelectImg", $.ui.selectmenu, {
            _renderItem: function (ul, item) {
                var li = $("<li>", { html: item.element.html() });
                var attr = item.element.attr("data-style");
                if (typeof attr !== typeof undefined && attr !== false) {
                    $("<span>", {
                        style: item.element.attr("data-style"),
                        "class": "ui-icon TFOOptlstFiltreImg"
                    }).appendTo(li);
                }
                return li.appendTo(ul);
            }
        });
 
        $("#people").TFOiconSelectImg({
            create: function (event, ui) {
                var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last");
                $span = $('<img class="TFOSizeImgSelected TFOOptlstFiltreImg"> ').appendTo($SpanTxt);
                $span.attr("style", $(this).children(":first").data("style"));
            },
            change: function (event, ui) {
                var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last");
                $span = $('<img class="TFOSizeImgSelected TFOOptlstFiltreImg"> ').appendTo($SpanTxt);
                $span.attr("style", ui.item.element.data("style"));
            }
        }).TFOiconSelectImg("menuWidget").addClass("ui-menu-icons customicons");
 
        $("#people").on("selectmenuchange", function (event, ui) { alert('x'); });
        //$(document).on('selectmenuchange', '#people', function (event, ui) { alert($(this).val()); });
 
    });

Code:

1
2
3
4
5
6
7
<img class="TFOSizeImgSelected TFOOptlstFiltreImg" style="background-image: url(&apos;/Images/imgres.png&apos;);" />
<select name="people" id="people" class="TFOlstFiltreImg">
    <option value="" data-style="background-image: url(&apos;/Images/vide.png&apos;);" selected="selected">TOUS</option>
    <option value="" data-style="background-image: url(&apos;/Images/vide.png&apos;);">SANS</option>
    <option value="/Images/imgres.jpg" data-style="background-image: url(&apos;/Images/imgres.jpg&apos;);">&nbsp;</option>
    <option value="/Images/imgres.png" data-style="background-image: url(&apos;/Images/imgres.png&apos;);">&nbsp;</option>
</select>

Mais je n'ai jamais alert('x'); ... J'ai essayé en enlevant la partie change: ... mais idem. Pourtant je suis : la doc officielle

Si j'utilise

Code:

1
2
3
4
5
6
 
$('#people').TFOiconSelectImg({
                change: function (event, ui) {
                    alert('something has changed');
                }
            });

Ca annule mon premier appel change:...