jQuery Mobile dynamic input range - slide events not working

Question

I cannot figure out why my slide events are not working on a range input type in jQuery Mobile. I have the following piece of code to dynamically build my input (slider):

var $label = $('<label for="slider1">Slider: </label>'),
    $slider = $('<input id="slider1" name="slider1" type="range" min="1" max="10" value="1">');

$('#mainContent').append($label, $slider).trigger('create');

$slider.on('slidestart', function (e) {
        console.log('slidestart');
    })
    .on('slidestop', function (e) {
        console.log('slidestop');
    });

Yet these events are never fired and nothing is ever logged - even if I do something like an alert('') in the function, no alert pops up. Everything renders fine, just the events are not binding - any idea why?

A live example here: http://jsfiddle.net/y4Y9L/.

Answer 1

Try this

$('#slider1').on('slidestart', function (e) {
    console.log('slidestart');
}).on('slidestop', function (e) {
    console.log('slidestop');
})

DEMO