Lose event listening

If you move to quick, jquery mobile slider might not catch the vmouseup event, therefore some function will be failed

by Chan Wu

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
<div data-role="page">
    <div data-role="header">
        <h3>event listening issue</h3>
    </div>
    <div data-role="content">
        <input type="range" id="slider" min="1" max="5" value="3">
        <div id="console"></div>
    </div>
</div>

CSS

#slider {
    display: none;
}
#console {
    font-size: 12px;
    width: 60%;
    height: 100px;
    border: 1px blue dotted;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 20px 0 0 20px;
}

JavaScript

var $slider = $('#slider'),
    $track = $('[role="application"]'),
    $handle = $track.find('a'),
    $console = $('#console'),
    $interval = false;

// move handle back to center when release the handle or click the track
$(document).add($handle).add($track)
    .on('vmouseup', function() {
        $slider.val(3).slider('refresh');
        clearTimer();
    })
    .on('vmousedown', function() {
        startTimer();
    });


// should be executed when slide the slider
function startTimer() {
    if (!$interval) {
        $interval = setInterval(function() {
            $console.prepend('value = ' + $slider.val() + '<br>');
        }, 1000);
    }
}

// should be executed when release the slider
function clearTimer() {
    if ($interval) {
        clearInterval($interval);
        $interval = false;
    }
}