Javascript 备用页上滑块的事件未触发

我正在使用jQuery Mobile，有一个包含两个

data role=page

元素的网页（一个页面用于纵向，另一个页面用于横向）

每个页面都包含一个

范围/滑块小部件

，它们应该同步在一起

我正在尝试为每个滑块订阅

slidestop

事件但是，仅调用来自首次加载的滑块的事件（即，如果页面以“纵向”模式打开，则仅调用纵向滑块的事件；如果页面以“横向”模式打开，则仅调用横向滑块的事件）。

另外，当我调用

.val（slideVal）

以下是一个示例：

加载时，移动滑块，注意会出现警报。然后，通过加宽“结果”窗口来调整其大小-->您应该看到它切换到“横向”页面。现在，移动滑块，注意没有出现警报

初始化这些事件订阅时我做错了什么？
为什么第二个滑块的值没有更新

---

以下是来自JSFIDLE站点的JS代码：

<script type="text/javascript">
        window.onload = init;
        function init() {
            // Switch page when orientation changes...
            $(window).on('orientationchange', function(e) { 
                if (e.orientation) {
                    if (e.orientation == "portrait") {
                        $.mobile.changePage("#pagePortrait");
                        $.mobile.navigate("#pagePortrait");     

                    } else if (e.orientation == "landscape") {
                        $.mobile.changePage("#pageLandscape");
                        $.mobile.navigate("#pageLandscape");
                    }
                }
            });


            // Update elements when slider changes...
            $("#rngPortrait").on("slidestop", function(event) {
                alert("Portrait Slidestop");

                var slideVal = $("#rngPortrait").val();
                $("#rngLandscape").val(slideVal);
                $("#txtPortrait").val(slideVal);
                $("#txtLandscape").val(slideVal);
            }); 

            $("#rngLandscape").on("slidestop", function(event) {
                alert("Landscape Slidestop");

                var slideVal = $("#rngLandscape").val();
                $("#rngPortrait").val(slideVal);
                $("#txtPortrait").val(slideVal);
                $("#txtLandscape").val(slideVal);
            }); 
        }
    </script>

window.onload=init；
函数init（）{
//方向改变时切换页面。。。
$（窗口）.on（'orientationchange'，函数（e）{
如果（如方向）{
如果（如方向=“纵向”）{
$.mobile.changePage（“#pagerative”）；
$.mobile.navigate（#pagegrait”）；
}否则如果（如方向=“横向”）{
$.mobile.changePage（“页面景观”）；
$.mobile.navigate（“#页面景观”）；
}
}
});
//滑块更改时更新元素。。。
$（“#rngPortrait”）。打开（“幻灯片”，函数（事件）{
警报（“纵向幻灯片”）；
var slideVal=$（“#rngPortrait”）.val（）；
$（“#rngLandscape”）.val（slideVal）；
$（“#txtractive”）.val（slideVal）；
$（“#txt”）.val（slideVal）；
}); 
$（“#rngLandscape”）。在（“幻灯片”上，函数（事件）{
警报（“横向幻灯片”）；
var slideVal=$（“#rngLandscape”）.val（）；
$（“#rngPortrait”）.val（slideVal）；
$（“#txtractive”）.val（slideVal）；
$（“#txt”）.val（slideVal）；
}); 
}

使用jQM页面事件而不是window.onload:@ezanker谢谢。如果您愿意，可以将其添加为解决方案。