javascript - JQuery $(document).ready(function () 不工作

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 后我进入的页面)，问题是我不能NOT 获取控制台测试打印，该函数未被调用加载 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 仅 加载该页面 div，而不加载该容器之外的任何脚本等。

如果你想为第二页运行代码，你要么需要在你的第一页上包含该脚本并使用事件委托(delegate)(因为第二页还不是 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');
});

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

编辑:
正如我提到的，这是默认行为，但是如果您愿意，可以 tell jQuery Mobile例如，通过在链接中添加 data-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"。