ChangePage (jQuery Mobile) doesn't work_问答_开发者

this is the first page : index.html

 <!DOCTYPE html>
 <html>
  <head>
  <link rel="stylesheet" href="../test/style.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">              </script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
 <script>

   $(document).ready(function(){
              $('#chercher').focus(function(){
          if ($('#chercher').val()=='(Code postale, Ville, Département ...)')
          $('#chercher').val("");
             });
$('#chercher').blur(function(){
    if ($('#chercher').val()=='')
    $('#chercher').val("(Code postale, Ville, Département ...)");
});     

});


$('#page').live('pagecreate',function(event){
$("#login").bind("click", function(event) {
    $.mobile.changePage( "conexion.html", { transition: "flip"} );
});
});`

   </script>

     <body>
         <div data-role="page" id="page">
        <div data-role="header" data-theme="a"><h1>Welcome</h1>

     <div data-role="navbar">
     <ul>
         <li><a href="#">Coupons</a></li>
         <li><a href="#">Bon plan</a></li>
         <li><input type="button" value="connect"  id="login" data-theme="a"/></li>

     </ul>
 </div><!-- /navbar -->
        </div>
        <div data-role="content" data-theme="c">

            <div>
                <input type="text" id="chercher" value="(Code postale, Ville, Département ...)">
            </div>
            <ul data-role="listview" data-inset="true"  data-dividertheme="b" data-count-theme="b">
                <li data-role="list-divider" >Choisissez une des catégories</li>
                <li><a href="index.php"><img src="images/tout.png" class="ui-li-icon" alt="tout" width="30" height="25"> &nbsp;&nbsp; Tout <span class="ui-li-count">24</span></a></li>
                <li><a href="index.php"><img src="images/restauration.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> &nbsp;&nbsp; Restauration</a><span class="ui-li-count">2</span></li>
                <li><a href="index.php"><img src="images/loisir.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp; Loisirs</a><span class="ui-li-count">156</span></li>
                <li><a href="index.php"><img src="images/beaute.PNG" class="ui-li-icon" alt="tout" width="30" height="25">  &nbsp;&nbsp; Beauté,santé <span class="ui-li-count">24</span></a></li>
                <li><a href="index.php"><img src="images/mode.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp;  Mode</a><span class="ui-li-count">13</span></li>
                <li><a href="index.php"><img src="images/maison.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&a开发者_运维知识库mp;nbsp; Maison, Jardin</a><span class="ui-li-count">16</span></li>
                <li><a href="index.php"><img src="images/service.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp;  Services</a><span class="ui-li-count">2</span></li>
                <li><a href="index.php"><img src="images/nationnal.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp; Nationnal</a><span class="ui-li-count">0</span></li>
            </ul>
        </div>
        <div data-role="footer" data-theme="a" class="ui-footer"><h1>Pied de page</h1></div>
</div>

<div id="page2" data-role="page">
</div>

</body>
</html>

My second page is named : conexion.html

  <!DOCTYPE html>
  <html>
 <head>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">   </script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
       <body>
                 <script>
                          function onSuccess(data, status)
                           {
                            data = $.trim(data);
                             $("#notification").text(data);
                            }

    function onError(data, status)
    {
       $("#notification").text(data);
    }  
    $(document).ready(function() {
        $("#submit").click(function(){



            var formData = $("#callAjaxForm").serialize();

            $.ajax({
                type: "POST",
                url: "conexion.php",
                cache: false,
                data: formData,
                success: onSuccess,
                error: onError
            });

            return false;
        });
    });
      </script>

<!-- call ajax page -->
<div data-role="page" id="callAjaxPage">
    <div data-role="header">
        <h1>Connexion</h1>
        <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-url="/">Home</a>
    </div>

    <div data-role="content">
        <div data-role="collapsible" data-collapsed="false">
                <h3>Sign in</h3>
        <form id="callAjaxForm">
            <div data-role="fieldcontain">
                <label for="email">Email</label>
                <input type="text" name="email" id="email"  />

                <label for="password">Password</label>
                <input type="password" name="password" id="password"  />
                <h3 id="notification"></h3>
                <button data-theme="b" id="submit" type="submit">Go</button>
            </div>
        </form>
        <div>
            <script src="http://connect.facebook.net/en_US/all.js"></script>
  <script>
     FB.init({ 
        appId:'214039341980486', cookie:true, 
        status:true, xfbml:true 
     });
  </script>
  <fb:login-button>Identifiez vous</fb:login-button>
        </div>
        </div>
        <div data-role="collapsible" data-collapsed="true">
            <h3>Create an account </h3>
        </div>
    </div>

    <div data-role="footer">
        <h1>Pied de page</h1>
    </div>
</div>

The recommended solution to bind a link with jQuery Mobile is :

$('#pageId').live('pagecreate',function(event){
    $("#login").bind("click", function(event) {
        $.mobile.changePage( "connexion.html", { transition: "flip"} );
    });  
});

You must add an id="pageId" on you page div.

You must use the pagecreate event (in place of the document.ready with non-mobile webpage)

And check the api of the changePage method (for jqm beta 2).

(and correct your H1 tag : <h1header</h1> )

Here's one big problem...

In index.html, your <script>...</script> is between </head> and <body>.

Put your script inside the <head> or <body> sections, preferably inside <body> just above the </body> tag.

You also have an acute symbol ( ` ) after your last semicolon.