jQuery.on() doesn't work as expected

Question

I have three sliders, lets call them one, two, three. The values of the sliders should be one >= two >= three.

I created one fiddle where I set the callbacks for change and slide when creating the sliders:

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

The fiddle is here: http://jsfiddle.net/RAGvr/3/. It works like I expect it to.

However I need to be able to attach the event handlers after the sliders has been created. So I create the sliders and after that listens to the change and slide events with jQuery.on(). Like this:

$(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 is here, http://jsfiddle.net/RAGvr/4/ , but doesn't work at all like the first. If I'm moving slider three, none of the callbacks for the other sliders are fired. What am I doing wrong?

Answer 1

You are both partially right, and I'm very thankful for your fast answers. The correct way to listen to both slide and change events should be:

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

the events sliderchange and sliderslide doesn't seem to be fired though as @Arun suggested.

Here's the fiddle with updated event names: http://jsfiddle.net/RAGvr/7/.