.change doesn't work, when the value changes via another script

Question

i have a select tag

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

i use UI Slider, and i need to write a function onchange of select tag, but when it changes via slider, my function doesn't work.

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

can i avoid such behavior without changing the ui slider script, and what is the explanation of such behavior?

Thanks

UPDATE

the script looks like this

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

                });
     });

where i must put thise script? (i've tried many variant:))

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

Answer 1

The select is being changed via the control itself, so the change event isnt being triggered. You should try to bind the change event on the ui slider and use the following code to trigger the change event on the select.

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

Answer 2

From what I can see, UI Slider is written on top of jQuery UI's slider. The jQuery UI slider has events that you can tap into, start, slide, change and stop. Using the example from the docs, you could try:

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

OR, using your updated example, supply a callback in the options for the slider:

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