如何使用jQuery mobile查看用户当前正在查看哪个div页面？

Question

我想检查用户设备上当前处于活动状态的div页面，意味着用户当前正在查看哪个页面，并采取相应措施。我有一些div和div内部我有一些列表条目，它们是可点击的，如果点击特定的列表条目，则打开不同的页面。我希望能够知道用户当前在哪个div中，这意味着我想获得用户设备上当前活动的div的id。您可以在下面找到我的应用程序中的示例html。

的index.html：

<div id="first" data-role="page">
...
   <li>
      <a href="#second" data-transition="slide">First</a>
   </li>
...
</div>

<div id="second" data-role="page">
...
   <li>
     <a href="#first" data-transition="slide">Second</a>
   </li>
...
</div>

这只是一个小片段。所以我想检查用户当前是否在id为“first”的div中，或者在id为“second”的div中。如何检查用户当前使用jQuery或JS的哪个div页面？

这对我来说似乎不起作用：

<script>
    $(document).on('mobileinit', function() {
        $(document).on("pagecontainershow", function(event, ui) {
            alert("Current page is: ", $(':mobile-pagecontainer').pagecontainer('getActivePage')[0].id);
        });
    });
</script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

Answer 1

您可以尝试这样的事情:(未经测试）

$(document).bind('pagecontainershow', function(e, data) {

    if ($.mobile.activePage.attr('id') == "first") {
        //do something..
            }
        }
        if ($.mobile.activePage.attr('id') == "second") {
            //do some other thing..
        }

});

Answer 2

我认为你可以这样做：

$(document).on('mobileinit', function(){
    $(document).on( "pagecontainershow", function(event, ui) {
        console.log($(':mobile-pagecontainer').pagecontainer('getActivePage')[0].id);
    });
});

Live Demo

---

jQuery.mobile.activePage：

自jQuery Mobile 1.4.0起，jQuery.mobile.activePage 已弃用，将在1.5.0 中删除。

使用 pagecontainer小部件中的 getActivePage（）方法。

---

当您使用jQM 1.3+时，您可以尝试以下代码：

$(document).on( "pagechange", function( event, ui ) {
   console.log($.mobile.activePage[0].id);
});

Updated demo for jqM 1.3+