Why aren't my scripts loading in jquery mobile?

Why aren't my scripts loading in jquery mobile?

hello,
on this link: http://www.quartopianodesign.it/lab/jm1.3/
I posted an example of a simple model jquerymobile with a fade in images using the Cycle plugin.
When I click on the second page of the fade is not running.



 I would like to solve the problem keeping to the transitions without using the rel = "external".
 I saw that many people have this kind of problem, anyone know how to solve it?
thanks



first page:
  1. <!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title>

        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <link rel="stylesheet" href="css/style.css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
        <script src="js/init.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>

    <div data-role="page" data-bind="pageinit" id="home">

        <div data-role="header">
            <h1>Foo</h1>
        </div><!-- /header -->

        <div data-role="content">
        <p><a href="test.html" data-prefetch="true">page 2</a></p>       

        <p>
         <div class="wrapCollection">
          <div><span>ALPHONSINE GRAND SAC</span><img src="image/prevCollection.jpg"></div>
          <div><span>hallo</span><img src="image/prevCollection2.jpg"></div>
         </div>
        </p>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->

    </body>

    </html>









































second page:
  1. <!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <link rel="stylesheet" href="css/style.css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
        <script src="js/init.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>

    <div data-role="page" data-bind="pageinit" id="test">

        <div data-role="header" >
            <h1>test</h1>
        </div><!-- /header -->

        <div data-role="content">
         <p><a href="index.html" data-prefetch="true">Back to index</a></p>       
         <p>
         <div class="test">
          <div><span>ALPHONSINE GRAND SAC</span><img src="image/prevCollection.jpg"></div>
          <div><span>hallo</span><img src="image/prevCollection2.jpg"></div>
         </div>
        </p>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->


    </body>

    </html>








































js external:

  1. $(document).ready(function() {
       
     $('.test,.wrapCollection ').cycle({
               fx:'fade',
            speed:  2000
        });   
       
    $('[data-bind="pageinit"]').live('pageinit', function (event) {
       alert($('[data-role="page"]').attr('id')) ;
    });
    });