jquery.mobile:将外部页面加载到dom时没有触发事件

时间:2017-11-17 20:50:43

标签: events jquery-mobile

好的,首先请不要将我对“外部”一词的使用与锚标签中使用的外部关键词混淆。这不是这个。

我有一个多页文档,一切正常。我还有其他几个很少使用的.html页面(即关于页面),所以我不想让它们混乱,而是根据需要加载它们。

因此,从about.html页面开始,加载后,此页面将(或应该)提供有关其运行的设备的一些信息以及我的应用程序的版本号以及是否有更高版本可用(有些人会关闭自动更新)。

在我走得更远之前,我想把它放在记录上,当它加载了rel =“external”属性集时,about.html页面正在另一个应用程序中运行,但我正试图摆脱它。

所以,在我的index.html中,我有一个带导航栏的标题,而锚标记是直截了当的:

<div data-role="popup" id="homeMenu" data-theme="b">    
      <ul data-role="listview" data-inset="true" >
        <li><a href="about.html" class="ui-icon-info">About</a></li>

当我在模拟器中运行应用程序时,about.html会被加载到dom中并成为活动页面,以便该部分正在运行但不会触发我可以找到的一个事件。

我尝试了以下所有方法:

$("body").on("pagecontainerbeforeshow", function( event, ui ) {
    console.log("Going to: " +ui.toPage[0].id);
});

$(document).on('pagecreate', function() {
    $(':mobile-pagecontainer').on('pagecontainerbeforeshow', function(event, ui) {
        console.log('pagecontainerbeforeshow triggered');
        console.log("Going to: " +ui.toPage[0].id);
    });
});

// $( "#aboutPage" ).on("pagecontainerbeforeshow", function( event ) {
$( "#aboutPage" ).on("navigate", function( event ) {
    console.log("aboutPage Ready!");
    initMenu();
    onAboutReady();
    $('#aboutPage').on("swiperight", function () {
        // I know, I know... one step at a time ;-)
        window.location.href = 'index.html'; 
    });  
});

我想我无法将一个事件处理程序附加到about页面,因为dom中尚未存在about页面,因此必须有另一种方法来附加实际被触发的事件。

我在这里缺少什么?

1 个答案:

答案 0 :(得分:0)

事实证明,答案比人们想象的要容易!而不是试图捕获不在dom中的特定页面的事件,只需为所有页面捕获事件,添加一个switch语句和中提琴!

$("body").on("pagecontainerbeforeshow", function( event, ui ) {
    console.log("pagecontainerbeforeshow -> Going to: " +ui.toPage[0].id);
    switch(ui.toPage[0].id)
    {
      case "aboutPage": // <div id="aboutPage" data-role="page"
            break;
    }
});