javascript - JS 触发器仅在每隔一个页面加载时正确触发

Question

我正在运行 JQ 1.10.2 和 JQM 1.4.0 代码已被 trim 以供解释。

index.php :包含一些菜单项和下面的JS。当点击菜单项时，JS会在目标页面执行，因为pagebeforeshow 。目标页面包含返回index.php的链接.

$(document).on('pagebeforeshow',function() {
    var baseHref = document.getElementsByTagName('base')[0].href;
    var filename = baseHref.split('/').pop();
    switch (filename) {
        case 'page1.php':
            $(this).on('tap','.log-item',function(){
                $(this).children('.log-item-more').toggle();
            });
            break;
        case 'page2.php':
            //other js
            break;
        case 'page3.php':
            //other js
            break;
    }
});

简而言之，该 JS 查找目标文件名并使用 switch 语句来确定要加载哪个特定于页面的 JS。

令人费解的是，当我加载index.php时然后单击page1.php链接，page1.php按预期加载，并且来自 switch 语句的 JS 也按预期工作。接下来，我单击链接返回到 index.php ，然后单击链接转到 page1.php ，页面按预期加载，但 JS 这次没有触发。

如果我来回重复，JS 会工作一次，然后下一次不会工作，并继续这个可预测的“开/关”循环。我以前从未见过这种行为，我很茫然。

更新:

经过进一步调查。我意识到每次创建页面时都会初始化 switch 语句中的代码。这意味着.on('tap')事件监听器在第一个页面加载时初始化一次，在第二个页面加载时初始化 2 次，在第三个页面加载时初始化 3 次，等等。我正在使用 toggle ，即hide或show ，这就是为什么看起来代码不起作用，而实际上是起作用的!

现在，我的问题是我应该监听哪个事件来代替 pagebeforeshow仅在 session 中第一次加载特定页面时触发？

更新:

查看 jQuery Mobile API 文档，它看起来像 pagecreate是我正在寻找的事件监听器，但它的行为就像 pagebeforeshow和 pageinit 。

我不知道为什么这些事件会这样......它们在这个版本的 jQM 中被破坏了吗？

或者我错误地链接了这些页面？也许<a href='log.php' data-transition='flip'>Log Page</a>构造 anchor 的方法是错误的吗？

Answer 1

已解决:

我没有遵循 jQuery 的 jQuery's Multiple Page Temple Structure适本地!

• 我将每个页面构造为 <div data-role="page" id="pagename"> 。标签。
• 然后，我在关闭该页面的 data-role="page" 之前包含了每个页面的 JS。标签。 我没有将其包装在任何事件监听器中 ( $(document).on('pageinit',function(){ }); )!
• 最后，在dashboard.php(基本上是我的网络应用程序的主页)上，我添加了 data-prefetch="true"在每个 anchor 标记中。