Intégrant Html Externe dans une page jQuery Mobile

Je cherche à intégrer dynamiquement une source externe de html dans un jQuery mobile de la page. Je suis en mesure de réussir à intégrer le html externe, mais il ressemble régulière HTML (c'est à dire pas de jQuery mobile affecté Html). Quelqu'un peut-il suggérer ce que je fais de mal?

Html Principal:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#main").load('externalHtml.html');
            //$("#main").append('externalHtml.html');
            //$("#main").load('externalHtml.html #contain');
            //$("#main").page();
        });
    </script>
</head>

<body>
    <div data-role="content">
        <div id="main"></div>Main Page</div>
</body>

externalHtml.html:

<html>
<head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
 </head>
<body>
external html
<div data-role="content" id="contain">
<input  type="search" name="name" id="name" value="" />
 </div>
      </body>
      </html>

OriginalL'auteur Ben Pearce | 2012-08-02

  1. 8

    Si vous .trigger('create') sur l'élément conteneur, jQuery Mobile initialise automatiquement n'importe quel widget à l'intérieur du conteneur. Par exemple: 

    $("#main").load('externalHtml.html').trigger('create');

    Ils devraient le document de mieux, mais si vous regardez les événements API pour chaque type de widget, vous allez voir la documentation concernant la create événement.

    Aussi, lire le haut de cette page de la documentation: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

    Vous ne devriez pas utiliser document.ready et au lieu de cela devrait être obligatoire à l' pageinit événement pour les pseudo-pages. À l'aide de document.ready sera plus susceptible de créer des maux de tête pour vous dans l'avenir.

    -- UPDATE --

    Vous aurez probablement envie d'appeler .trigger('create') dans un rappel de sorte que le HTML externe a été chargé avant de tenter de l'initialiser:

    $("#main").load('externalHtml.html', function () {
    $(this).trigger('create');
});
    Fonctionnait très bien, merci!
    nice! mais comment mettre à jour l'url de hachage?
    Vous pouvez utiliser window.location.hash = 'some-hash'; de mettre à jour l'URL, ou dans les navigateurs modernes vous pouvez utiliser le pushState API pour mettre à jour l'URL au-delà de la table de hachage.

    OriginalL'auteur Jasper