JQuery $(document).ready(function () not working

Question

This is the first page where I try to open the 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)

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

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

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

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.

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

<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

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

Answer 2

I made you an working example: 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.

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