Question

我有一个生成滑块的选项。当选择选项更改时，滑块会以相同的方式更改，反之亦然。

当选择的选项发生变化时，我设置了一个警报。当我从选择中更改选项时，此警报会识别并触发，但是当我从滑块更改它时，不会触发任何内容。

我真的需要解雇这件事。这是我的代码。

 <!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>

Answer 1

快速Google搜索建议为您正在使用的特定滑块控件附加onChange事件处理程序的正确方法是：

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

Answer 2

这是预期的行为，程序化更改不会触发onchange事件（如果他们这样做，很多情况下会出现无限循环）。

要触发您的处理程序，只需自行触发change事件，例如：

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

在您的情况下，请使用滑块的stop事件，如下所示：

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

You can try it here，如果您正在处理多个元素，请使用.each，您可以在其中触发change的{{1}}事件“继续。

jquery .change（）没有认识到变化！

2 个答案: