Question

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

index.php：包含许多菜单项和以下JS。单击菜单项时，由于pagebeforeshow，JS在目标页面上执行。目标网页包含返回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工作1次，然后不工作，并继续这个可预测的“开/关”循环。我以前从未见过这种行为而且我不知所措。

更新

进一步研究之后。我意识到每次创建页面时都会初始化switch语句中的代码。这意味着.on('tap')事件监听器在第一页加载时被初始化一次，在第二页加载时被初始化一次，在第三页加载时被初始化为3x，等等。我正在使用toggle，这是{ {1}}或hide，这就是为什么代码实际上无法正常工作的原因！

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

更新

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

我不知道为什么这些事件会以这种方式发挥作用......这个版本的jQM会破坏它们吗？

或者我是否错误地链接了这些页面？也许pagebeforeshow是构造锚的错误方法吗？

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（基本上是我的webapp主页）上，我在每个锚标记中加入了data-prefetch="true"。

JS触发器仅在每个其他页面加载时正确触发

1 个答案: