jquery .change() не распознает изменения!

#jquery

Вопрос:

У меня есть опция select, которая генерирует ползунок. Когда меняется параметр выбора, меняется и ползунок, и таким же образом — наоборот.

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

Мне действительно нужно запустить эту штуку. Вот мой код.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>        Demo Page: Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" />
<style type="text/css">
    body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }
    fieldset { border:0; margin: 6em; height: 12em;}    
    label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
    select {margin-right: 1em; float: left;}
    .ui-slider {clear: both; top: 5em;}
</style>
<script type="text/javascript">
    $(function(){
        //demo 1
        $("#hide_me").hide();
        var abc = $('select#privs').selectToUISlider().next();

        $('.change').change(function() {
             alert("Ive been called");
        });
    });

</script>
<script type="text/javascript">

</script>

</head>

    <body>

<form action="#">
    <!-- demo 1 -->
    <fieldset>
        <label for="speed">Select a Level</label>
        <select name="speed" class="change" id="privs">
            <option value="Read">Read</option>
            <option value="Create">Create</option>
            <option value="Update">Update</option>
            <option value="Delete">Delete</option>
        </select>

    </fieldset>

</form>

Ответ №1:

Быстрый поиск в Google подсказывает правильный способ подключения обработчика событий onChange для конкретного используемого вами элемента управления slider следующим образом:

 var abc = $('select#privs').selectToUISlider({
    sliderOptions: {
        change: function(e, ui) { 
            alert('Changed!'); 
        }
    }
}).next();

Ответ №2:

Это ожидаемое поведение, программные изменения не запускают onchange событие (во многих случаях возник бы бесконечный цикл, если бы они это сделали).

Чтобы запустить ваш обработчик, просто запустите change событие самостоятельно, например:

 $('#privs').val('Read').change();

В вашем случае используйте stop событие ползунка, вот так:

 var abc = $('#privs').selectToUISlider({
    sliderOptions: {
        stop: function(event, ui) {
            $('.change').change();
        }
    }
}).next();

Вы можете попробовать это здесь, однако, если вы имеете дело с несколькими элементами, используйте .each где вы можете вызвать change событие <select> , которое происходит с ползунком, на котором вы находитесь.