Question

我正在使用jQuery Mobile，并且有一个包含两个data-role=page元素的网页（一个页面用于纵向方向，一个页面用于横向方向）。

这些页面中的每一页都包含一个range/slider widget，它们应该同步在一起。

我正在尝试为每个滑块订阅slidestop事件。但是，只有来自首次加载的滑块的事件才会被调用（即如果页面以＆＃34;纵向＆＃34;模式打开，则只会调用纵向滑块的事件;如果是页面在＆＃34; landscape＆＃34;模式下打开，只会调用横向滑块的事件。

此外，当我致电.val(slideVal) 时，第二个滑块的值未更新

以下是一个示例： http://jsfiddle.net/69KbD/

加载时，移动滑块并注意出现警告。然后，调整＆＃34;结果＆＃34;通过加宽窗口 - ＆gt;你会看到它切换到＆＃34; Landscape＆＃34;页。现在，移动滑块并注意不会出现警告。

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

以下是来自jsfiddle网站的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>

替代页面上的滑块事件不会被触发

0 个答案: