jQuery.on() 没有按预期工作答案

【问题标题】：jQuery.on() doesn't work as expectedjQuery.on() 没有按预期工作
【发布时间】：2013-04-17 14:09:48
【问题描述】：

我有三个滑块，我们称它们为一、二、三。滑块的值应该是one >= two >= three。

我创建了一个小提琴，我在创建滑块时设置了更改和滑动的回调：

$(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);
        }
    }
});

小提琴在这里：http://jsfiddle.net/RAGvr/3/。它像我期望的那样工作。

但是，我需要能够在创建滑块后附加事件处理程序。所以我创建了滑块，然后用 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/，但根本不像第一个那样工作。如果我移动滑块 3，则不会触发其他滑块的回调。我做错了什么？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-slider

【解决方案1】：

You are naming the events wrong.

名字是slidechange:

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

Demo

你应该看看API for jQuery UI slider

【讨论】：

【解决方案2】：

当您在配置之外使用 jquery ui 小部件事件时，您需要预先添加小部件名称

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

【讨论】：

【解决方案3】：

你们都说对了一部分，我非常感谢你们的快速回答。监听slide 和change 事件的正确方法应该是：

one.on('slide slidechange', function(e, ui) {
// code here
});

sliderchange 和 sliderslide 事件似乎并没有像 @Arun 建议的那样被触发。

这是更新事件名称的小提琴：http://jsfiddle.net/RAGvr/7/。

【讨论】：