Question

这是我尝试打开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>

Answer 1

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

如果要为第二页运行代码，则需要在第一页上包含该脚本并使用事件委托（因为第二页不是DOM的一部分）或者包含带有第二页的脚本 date-role =“page”包装。

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

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

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

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

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

编辑：
正如我所提到的，这是默认行为，但是如果您希望通过在链接中添加data-ajax="false"或rel="external"来加载第二页，tell jQuery Mobile可以{{3}}填写完整帖子，例如< / p>

<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"。

Answer 2

我为你做了一个工作的例子：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

JQuery $（document）.ready（function（）无效

2 个答案: