使用 pagecontainer 导航到外部页面时未触发事件

Question

Html 1：第一页

<script src="js/jquery-1.9.1.min.js"></script>
<script>
        $(document).bind("mobileinit", function(){
            $.mobile.defaultPageTransition = "slide";
            $.mobile.linkBindingEnabled =true;
            $.mobile.ajaxEnabled= false;
        });            
</script>
<script src="js/jquery-mobile.1.4.2.min.js"></script>
<script>
  $(document).on("pagecreate",function(){
    $(".anchor").click(function(){
       $( ":mobile-pagecontainer" ).pagecontainer( "change", "second.html" , { transition:"pop"});
     });       
 });
</script>

Html 2：第二页

<script src="js/jquery-1.9.1.min.js"></script>
<script>
        $(document).bind("mobileinit", function(){
            $.mobile.defaultPageTransition = "slide";
            $.mobile.linkBindingEnabled =true;
            $.mobile.ajaxEnabled= false;
        });            
</script>
<script src="js/jquery-mobile.1.4.2.min.js"></script>
<script>
  $(document).on("pagecreate",function(){

    alert("Instead of alert im going to use ajax ");
 });

问题：

我尝试使用 pagecontainer 将页面从第一页更改为第二页，它工作正常。 问题是
我需要使用ajax和pagecreate在第二页中加载一些内容，pageshow在更改页面时没有任何工作但是如果我单独运行第二页它正在工作...... 提前致谢

Answer 1

要解决这个问题，你需要了解 jQuery Mobile 页面处理是如何工作的，而你无法解决这个问题。

当 jQuery Mobile 仅处理页面时，第一个 HTML 文件完全加载到 DOM 中，所有中间文件仅部分加载。当我说部分时，我的意思是 HEAD 将被剥离，只有 FIRST data-role="page" 将被加载。

因此，如果您有 2 个页面，例如，假设第一个页面称为 ma​​in.html，第二个页面称为 second.html，而 lats 则说这两个页面hava 5 data-role="page" div 容器。

ma​​in.html 中的所有页面都会在应用初始化期间加载到 DOM 中，但是当您将页面更改为 second.html 时，只有第一个 data- role="page" div 容器将被加载到 DOM 中，其他所有内容都将被丢弃。

了解更多信息here + 解决方案。