将CropIt与jQuery Mobile一起使用：如果滑块不在第一个jQm页面上，它就不起作用

Question

我正在尝试实现一个基于jQuery的图像裁剪功能，该功能可以导出到base64文本。 CropIt似乎非常适合这项工作，并且工作得很漂亮，除非它不是jQm＆＃34;页面＆＃34;列表中的第一个jQuery Mobile页面，它默认显示在HTML文件中。如果不是，除了缩放滑块外，一切都有效。我已经创建了一个jsFiddle来说明问题：

http://jsfiddle.net/f97r3suf/5/

任何有助于缩放滑块工作的帮助都将不胜感激，谢谢！附加代码。

<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
    <div data-role="content">
        <p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
        <a href="#upload" data-role="button" data-theme="b">Example: CropIt is the second jQm page</a>
        <p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: <a href="http://jsfiddle.net/jLqjvzdu/1" data-role="button" data-theme="b" target="_blank">Example: Cropit is the first jQm page.</a></p> 
    </div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
    <div data-role="content" style="padding:0px">
        <!-- content -->
        <div class="image-editor">
            <input type="file" class="cropit-image-input">
            <div class="cropit-image-preview"></div>
            <div class="image-size-label">Resize image</div>
            <input type="range" class="cropit-image-zoom-input">
            <button class="export">Export</button>
        </div>
    </div>
</div>