.change не работает, когда значение изменяется с помощью другого скрипта

Question

У меня есть тег выбора

<select name="valueAA" id="valueAA">

Я использую Ползунок пользовательского интерфейса , и мне нужно написать функцию по изменению тега выбора, но когда он изменяетсяс помощью ползунка моя функция не работает.

$("#valueAA").change(function()
        {
            alert("works");// doesn't work
        })

Могу ли я избежать такого поведения, не меняя сценарий ui slider, и каково объяснение такого поведения?

Спасибо

ОБНОВЛЕНИЕ

скрипт выглядит так

    $(function(){
                $('select#valueAA, select#valueBB').selectToUISlider({
                    labels:6

                });
     });

где я должен поставить этот скрипт?(я пробовал много вариантов :))

$( ".selector" ).bind( "slidechange", function(event, ui) {
  ...
});

Answer 1

Из того, что я вижу, слайдер пользовательского интерфейса написан поверх слайдера jQuery UI . Слайдер jQuery UI содержит события, к которым вы можете подключиться: start , slide , change и stop Используя пример из документации, вы можете попробовать:

// Bind to the change event by type: slidechange.  
$("#valueAA").bind( "slidechange", function(event, ui) {
  $(this).change();
});

ИЛИ, используя ваш обновленный пример, укажите обратный вызов в опциях для ползунка:

$(function(){
            $('select#valueAA, select#valueBB').selectToUISlider({
                labels:6,
                change: function (event, ui) { $(this).change(); }
            });
 });

Answer 2

Я некоторое время боролся с этим, но нашел ответ:

$('.slider').selectToUISlider({ 
    sliderOptions: { 
        change:function() { 
            alert("works");
        } 
    } 
});

Answer 3

Выбор изменяется с помощью самого элемента управления, поэтому событие изменения не инициируется.Вы должны попытаться связать событие изменения с помощью ползунка пользовательского интерфейса и использовать следующий код, чтобы вызвать событие изменения для выбора.

$("#valueAA").trigger("change");