代码之家 › 专栏 › 技术社区 › Peter

jquery.change()无法识别更改!

jquery

Peter · 技术社区 · 15 年前

我有一个选项选择,正在生成一个滑块。当“选择”选项更改时,滑块将以相同的方式更改,反之亦然。

我已经设置了一个警报,当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>

2 回复 | 直到 15 年前

VoteyDisciple 15 年前

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

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

Nick Craver 15 年前

这是预期的行为,程序更改不会触发 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 在那里你可以触发 改变 事件 <select> 这和你的滑杆是一致的。