jQuery.on() 无法按预期工作

Question

我有三个 slider ，我们称它们为一、二、三。 slider 的值应为 一 >= 二 >= 三。

我创建了一个 fiddle ，在创建 slider 时设置更改和滑动的回调:

$(document).ready(function() {
    var oneValue = 5,
        twoValue = 3,
        threeValue =1;

    var one = $('#one'),
        two = $('#two'),
        three = $('#three');

    one.slider({
        min: 0,
        max: 10,
        value: oneValue,
        change: function(e, ui) {
            oneValue = ui.value;
            oneTest();
        },
        slide: function(e, ui) {
            oneValue = ui.value;
            oneTest();
        }
    });

    two.slider({
        min: 0,
        max: 10,
        value: twoValue,
        change: function(e, ui) {
            twoValue = ui.value;
            twoTest();
        },
        slide: function(e, ui) {
            twoValue = ui.value;
            twoTest();
        }
    });

    three.slider({
        min: 0,
        max: 10,
        value: threeValue,
        change: function(e, ui) {
            threeValue = ui.value;
            threeTest();
        },
        slide: function(e, ui) {
            threeValue = ui.value;
            threeTest();
        }
    });

    function oneTest() {
        console.log('oneTest');
        if (oneValue < twoValue) {
            two.slider('value', oneValue);
        }
    }
    function twoTest() {
        console.log('twoTest');
        if (twoValue < threeValue) {
            three.slider('value', twoValue);
        }
        if (twoValue > oneValue) {
            one.slider('value', twoValue);
        }
    }
    function threeTest() {
        console.log('threeTest');
        if (threeValue > twoValue) {
            two.slider('value', threeValue);
        }
    }
});

fiddle 在这里:http://jsfiddle.net/RAGvr/3/ 。它的工作原理正如我所期望的那样。

但是，我需要能够在创建 slider 后附加事件处理程序。因此，我创建了 slider ，然后使用 jQuery.on() 监听 change 和 slide 事件。像这样:

$(document).ready(function() {
    var oneValue = 5,
        twoValue = 3,
        threeValue =1;

    var one = $('#one'),
        two = $('#two'),
        three = $('#three');

    one.slider({
        min: 0,
        max: 10,
        value: oneValue
    });

    two.slider({
        min: 0,
        max: 10,
        value: twoValue
    });

    three.slider({
        min: 0,
        max: 10,
        value: threeValue
    });

    one.on('change slide', function(e, ui) {
        oneValue = ui.value;
        oneTest();
    });

    two.on('change slide', function(e, ui) {
        twoValue = ui.value;
        twoTest();
    });

    three.on('change slide', function(e, ui) {
        threeValue = ui.value;
        threeTest();
    });

    function oneTest() {
        console.log('oneTest');
        if (oneValue < twoValue) {
            two.slider('value', oneValue);
        }
    }
    function twoTest() {
        console.log('twoTest');
        if (twoValue < threeValue) {
            three.slider('value', twoValue);
        }
        if (twoValue > oneValue) {
            one.slider('value', twoValue);
        }
    }
    function threeTest() {
        console.log('threeTest');
        if (threeValue > twoValue) {
            two.slider('value', threeValue);
        }
    }
});

fiddle 在这里，http://jsfiddle.net/RAGvr/4/ ，但根本不像第一个那样工作。如果我移动第三个 slider ，则不会触发其他 slider 的回调。我做错了什么？

Answer 1

You are naming the events wrong .

名称是slidechange:

one.on('slidechange', function(e, ui) {
    oneValue = ui.value;
    oneTest();
});

Demo

您应该查看 API for jQuery UI slider