1

这是我尝试打开 detail.html 的第一页；

<a href="detail.html" data-role="none" role="link">
    <div class="place">name</div>
    <div class="arrow"></div>
    <div class="ammount">-&euro;4,<span class="fontsize14">25</span></div>
</a>

我在 detail.html 上加载脚本时遇到问题（在第一页上单击 href 链接后）

这是我在 details.html 标题中的脚本（我在第一页上单击 href 之后的页面），问题是我无法获得控制台测试打印，加载 details.html 页面时不会调用该函数。只有在我手动刷新页面后才会出现

<script>
    $(document).bind("pageinit", function(){//or $(document).ready(function ()   
          console.log('test');
    });
</script>
4

2 回答 2

2

要了解您的问题，我认为您需要首先了解 jQuery Mobile 如何“加载”外部页面。默认情况下，当您单击指向单独 HTML 页面的链接时，JQM 会加载该页面上的第一个data-role="page"并将其附加到第一页的 DOM，事情是 JQM仅加载该页面div 而不是任何脚本等在该容器之外。

如果要为第二页运行代码，则需要在第一页中包含该脚本并使用事件委托（因为第二页还不是 DOM 的一部分），或者在第二页的日期角色中包含该脚本="page"包装。

在您的情况下，如果您想为您的详细信息页面运行代码，您需要在第一页上包含脚本，例如假设您的 detail.html 页面上有一个 div，如下所示

<div id="details" data-role="page"> ..rest of your content 
</div>

然后在您的第一页上，您可以执行以下操作

$(document).on('pageinit', '#details', function() {
  console.log('test');
});

或者，您可以在“详细信息”页面包装器中包含一个脚本标记。

编辑：
正如我所提到的，这是默认行为，但是如果您希望可以告诉 jQuery Mobiledata-ajax="false"在加载第二页时通过添加或添加rel="external"到您的链接来做一个完整的帖子

<a href="detail.html" data-ajax="false" data-role="none" role="link">
    <div class="place">name</div>
    <div class="arrow"></div>
    <div class="ammount">-&euro;4,<span class="fontsize14">25</span></div>
</a>

和之间的区别在于data-rel="external"，data-ajax="false"如果第二页基本上是语义的，data-rel="external"那么如果第二页位于不同的域中，则应该使用它。

于 2013-01-17T15:20:10.240 回答
1

我给你做了一个工作的例子：http: //jsfiddle.net/Gajotres/Eqzd2/ 

$("#second").live('pagebeforeshow', function () {
    console.log('This will only execute on second page!');
});

如果您使用的是最新版本的 jQuery，您可以使用 on 而不是 live。

还可以看看我关于 jQM 页面转换中的事件流的文章：https ://stackoverflow.com/a/14010308/1848600

于 2013-01-17T14:56:52.610 回答