JQuery $（文档）.ready（function（）无效

This is the first page where I try to open the detail.html;

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

I have problems to load the scripts on detail.html (after href link is clicked on first page)

我有问题在detail.html上加载脚本（在第一页点击href链接后）

Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page

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

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

2 个解决方案

#1

To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.

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

If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.

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

Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following

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

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

Then on your first page you could do the following

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

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

Or alternatively you can include a script tag withing your "details" page wrapper.

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

EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example

编辑：正如我所提到的，这是默认行为，但是如果您希望通过在链接中添加数据-ajax =“false”或rel =“external”，可以告诉jQuery Mobile在加载第二页时执行完整帖子例

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

The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.

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

#2

I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/

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

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

You can use on instead of live if you are using last version of jQuery.

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

Also take a look at my article about event flow in jQM page transition: https://*.com/a/14010308/1848600

另请查看我关于jQM页面转换中的事件流的文章：https：//*.com/a/14010308/1848600

#1